HTML5 application based on CSS3 Media Queries

To introduce the media, specifically the CSS media queries, the media query contains a media type and at least one expression that restricts the range of the style sheet using media properties such as width, height, and color. CSS3 added media queries that allow styles to be applied to certain device scopes without modifying the content.  

So how to define media, and look at the following code, you can certainly guess a ballpark.

<!--the CSS media query in the LINK element--><link rel= "stylesheet" media= "(max-width:800px)" href= "Example.css"/><!-- CSS media query in style sheet--><style>@media (max-width:600px) {  . facet_sidebar {    display:none;  }} </style> 

As explained in the document, when the media query is true, the associated style sheet or style rules are applied according to the normal cascading rules. The style sheet with media queries on the <link> tab will still be downloaded (but not applied) even if the media query returns FALSE.

So, this is also a disadvantage, if you say to a page defined more than one style standard to different media properties, then the page load time will be affected, but the words come back, in the current network rapid development of the times, the speed is constantly improving and improving, so the impact is not big, can be almost negligible.

Media can also compose media expressions with logical operators (and, not, only, and so on) to write more complex filters, which I'm not going to use here. One by one description, students who want to learn more, can read the relevant documentation:https:// Developer.mozilla.org/en-us/docs/web/css/media_queries/using_media_queries This inside has to do the detailed introduction.

Next we will use a few demos to demonstrate the use and performance of media.

Since our goal today is to explore how to listen for changes in the Devicepixelratio property, we can change the background style of a div with different devicepixelratio values, with the following code:

<! DOCTYPE html>            (min-resolution:2dppx) {                #image {                    background : red;                }            }            @media screen and (min-resolution:1dppx) {                #image {                background: #000;            }            }        </style>       

The code has, so how to test it? In general, Devicepixelratio Zodiac will not change, but there will be special circumstances, for example, your computer is connected to two monitors, and the devicepixelratio properties of the two browsers are not the same, so congratulations, you have the test conditions, Just drag the page from one screen to another so you can see the effect.

The students who have gone to the test will find that the background color of the div does not want to be set in the code, in different Devicepixelratio attribute values, to show different colors, this is why?

This code is the first time I write code, run to find no effect, at first I do not know why, when the cross-screen drag the page, in the browser console, I found the reason. So what exactly is causing the setup to be invalid? Let's take a look at the Style content on the two screen, the left side is min-resolution equals 1, the right is equal to 2

Comparing two graphs, it can be found that in the case of min-resolution equals 2, the attributes defined in the inside are overwritten, and are not effective, which is why?

To explain this, I'm afraid I need to add a bit of knowledge about the prefix of min-and max-, the specific effect in the code, as described in the document: Most media properties are prefixed with "min-" and "max-" to express "greater than equals" and "less than equals". This avoids the use of "<" and ">" characters that conflict with HTML and XML. If you do not specify a value for the media property, and the actual value of the attribute is nonzero, the expression is resolved to true. If the property value is not on the device that the browser is running on, the expression that contains the property value generally returns false.

In fact, the above instructions have helped me to explain clearly, I would like to explain in layman's terms: when Devicepixelratio is 1 o'clock, only min-resolution:1dppx this condition satisfies, so the div color is black yes; Devicepixelratio is 2 o'clock, two media satisfies the condition, and the CSS rule is that the post-loaded style will overwrite the first loaded style, because I write min-resolution:1dppx media in the back, so if two media are full MIN-RESOLUTION:1DPPX Media will overwrite min-resolution:2dppx media, so whether you drag the page to that screen, the background color of the div is black.

Then we swapped two media positions and the problem was solved successfully.

<style media= "Screen" > @media screen and    (min-resolution:1dppx) {        #image {            background: #000 ;        }    }    @media screen and (min-resolution:2dppx) {        #image {            background:red;        }    } </style>   

The above is based on different media conditions to set different styles, this is the practice of CSS, in JavaScript, there is no specific way to listen to the Window.devicepixelratio property changes, then how to listen to Devicepixelratio How about a property change? The method is also very simple, look at the following code, you must understand:

Window.matchmedia (' screen and (min-resolution:2dppx) '). AddListener (function(e) {    console.info (e), Window.devicepixelratio);});

Slightly explained, the corresponding media is obtained through the window.matchmedia (' Media expression ') method, and then the media changes are monitored through addListener (function (e) {}).

A friend who has played Canvas must know that the width and height of the canvas itself should be exactly equal to the value of devicepixelratio in order for the content to be drawn to be the best, and all If you switch the screen of different Devicepixelratio property values, the canvas's width is not reset, the picture will not be the best effect.

Next we do a small experiment based on the 3D model of the HT for Web . In the experiment, there was a car in the Graphview, which was based on a certain route, and when it was dragged to another screen, it was replaced by a car. Let's take a look:

The above two pictures are on different screens, the effect of the car moving can be accessed by the following links:

The address of the experiment is:http://www.hightopo.com/demo/media/index.html The following is the specific code for the experiment:

<! DOCTYPE html>@media screen and (min-RESOLUTION:2DPPX) {} html, body {padding:0px;            margin:0px; } </style> <script src= ". /.. /oldhtforweb/lib/core/ht.js "></script> <script src=". /.. /oldhtforweb/lib/plugin/ht-modeling.js "></script> <script src=". /.. /oldhtforweb/lib/plugin/ht-obj.js "></script> <script>Ht. Default.setimage (' Road ', './images/road.jpg ')); var init = function() {g3d = newHt.graph3d.Graph3dView (); var dm =G3D.DM (); G3d.addtodom (); G3d.seteye (1200, 300, 0); G3d.getnote = function(data) {if (Data.gettag ()!== ' Carnode ') return null; Return ' Devicepixelratio: ' +Window.devicepixelratio; }; var carindex = 0; Window.matchmedia (' screen and (min-resolution:2dppx) '). AddListener (function() {Carindex = (carindex + 1)% 2; var obj =Result[carindex]; CARNODE.S (' Shape3d ', obj.name); Ht. Default.setdevicepixelratio (); }); var polyline = Createpath (DM, 300), params ={delay:0, duration:10000, easing:function(t) {return (T *= 2) < 1 0.5 * t * t:0.5 * (1-(--T) * (t-2)); }, Action:function(V, t) {var length =G3d.getlinelength (polyline); var offset = G3d.getlineoffset (polyline, Length *V), point =Offset.point, px =Point.x, py =Point.y, PZ =Point.z, tangent =Offset.tangent, TX =Tangent.x, Ty =TANGENT.Y, TZ =Tangent.z; CARNODE.P3 (px, py-9, PZ); Carnode.lookat ([px + tx, py + ty-9, PZ + tz], ' front '); }, Finishfunc:function() {Ht. Default.startanim (params); }}, Carlist = [' Fordfocus ', ' concept-sedan-01v2 '], result = [], Carnode = newHt. Node (); Carnode.settag (' Carnode '); Carlist.foreach (function(name, index) {ht. Default.loadobj ('./objs/' +name+ '/' +name+ '. obj ', './objs/' +name+ '/' +name+ '. MTL ', {cube:true, Center:true, Shape3d:name, Finishfunc:function(Modelmap, array, rawS3) {var k = 110/raws3[0]; rawS3 = Raws3.map (function (v) {return v *K }); Result[index] ={' Name ': Name, ' Modelmap ': Modelmap, ' array ': Array, ' rawS3 ': RawS3}; if (index = = 0) {var node =Carnode; NODE.S ({' Wf.width ': 0, ' Shape3d ': Name, ' note.position ': 44, ' note ': ' Devicepixelratio: ' +Window.devicepixelratio, ' note.face ': ' Top ', ' note.autorotate ': true, ' Note.font ': ' 46px Arial, Sans-serif '}); NODE.S3 (rawS3); NODE.R3 (0, Math.PI, 0); Dm.add (node); Polyline.setelevation (raws3[1] * 0.5 + 2); Ht. Default.startanim (params); } } }); }); }; var Createpath = function(DM, RADIUS) {var polyline = newHt. Polyline (); Polyline.setthickness (2); POLYLINE.S ({' Shape.border.pattern ': [16, 16], ' shape.border.color ': ' Rgba (0, 0, 0, 0) ', ' shape3d.resolution ': 300, ' 3d.selectable ': false}); Dm.add (polyline); var cx = 0, cy = radius * Math.PI * 0.5, Count = 500, points = [{X:radius, Y:-cy, e:0}], segments = [1]; for (var k = 0; k < count + 1; k++) {var angle = k * Math.PI/Count Points.push ({x:cx + radius *Math.Cos (angle), Y:cy + radius *Math.sin (angle), e:0}); Segments.push (2); } CY *=-1 radius *=-1 ; for (var k = 0; k < count + 1; k++ ) {var angle = k * Math.PI/ count; points.p Ush ({x:cx + radius *  math.cos (angle), Y:cy + radius *  math.sin (angle), e:0 }); Segments.push (2  ); } polyline.setpoints (points); Polyline.setsegments (segments); var shape = new  ht. Shape (); Shape.setpoints (points); Shape.setsegments (segments); SHAPE.S ({' top.visible ': false , ' bottom.image ': ' Road ' , ' bottom.reverse.flip ': true , ' Bottom.uv.scale ': [1 ], ' back.visible ': false , ' Front.reverse.flip ': true , ' 3d.selectable ': false }); Shape.setthickness (Shape.settall ); Shape.setclosepath (true ); Dm.add (shape); return  polyline;}; </script>            

To introduce the technologies that are used in this Demo for the HT for Web .

First is the car, the car is not generated through the HT for Web , but rather through a professional 3D tool design, and then export the obj and MTL files, the HT for web parsing of obj and MTL files, and then displayed in Graph3dview, For more specific information, please refer to my obj document:http://www.hightopo.com/guide/guide/plugin/obj/ht-obj-guide.html

In the obj document, you'll see an example of an airplane that flies along a set route, and you should think, how does this pathfinding come true? In fact it is very simple, we cut the route into a small very small unit, and then according to the algorithm to obtain the coordinates of the small unit to the moving object, so that the object moved up.  

In the Demo, there is a very fine road, this road is a Shape node, according to the road generated by the car, Shape is a hexahedral, because the end-to-end connection, so there is no right and left side, in this example, I will road back and top face hidden, and then bottom face support turned Turn, let the bottom surface of the map display on the inner surface, so that the road is built.

HTML5 application based on CSS3 Media Queries