Learning--pseudo-class +js realize CSS3 Media queries cross-boundary accurate judgment

This article transferred from: http://www.zhangxinxu.com/wordpress/?p=2387

Media queries allows the device to apply different CSS styles, layouts, and so on in different sizes. To adapt to handheld devices, Pu display, widescreen display, and the future of the refrigerator on the networked display, automotive Digital equipment. Then, simply layout through CSS may not be able to handle all the interaction requests.

As a simple example, we may be in a non-maximized state when we open the browser, and if it is handled as Pu, the loaded picture may be the small picture of 128*128. However, when we maximize the experience for a better reading, we need to use a larger size picture 256*256,

Use media queries? Please, CSS can only change the external dimensions, you have to twice times the size of stretching? Obviously, it is more reasonable to load a medium-sized picture of 256*256 size. In the current technology, it is estimated that in addition to using JS to modify the image src, it is difficult to have other more available methods.

OK, now the question, how to make JS changes and CSS layout changes in sync?

Two, CSS interaction and JS Interactive synchronization problem

How to make CSS style, layout changes, while the exact trigger JS interaction it?

Method one, direct width/height value matching

Absent CSS3 Media queries cross-boundary triggering generally has a width or height value, or color (rarely used). For example, the Pu picture width is 128*128, possibly the following CSS:

{    img {        width: 128px;         Height: 128px;    }

This means that when screen width is not more than 1024 pixels, the image width is 128 pixels and the height is 128 pixels.

Therefore, we may capture the browser window size by changing the size of the browser window in the Resize event, compared with 1024 if the corresponding Pu event processing is triggered if less than, then widescreen processing.

Window.addeventlistener ("Resize",function() {  //window.innerwidth  ie9+ Browser support  if(window.innerwidth<=1024) {    // Pu processing  }  else{   // widescreen processing   }});

It's really a simple and efficient approach. However, there are also deficiencies.

1. maintainability

The corresponding value of a vector is often changed. For example, chubby today weighs 148 pounds, tomorrow to drink a few hours of the toilet back and forth, probably only 145 pounds. Similarly, for a value of 1024, the odds of a change are great. Change in fact nothing, the trouble is that the following JS in the value of the judgment and CSS restrictions are to be consistent. That is, the CSS width threshold changes, JS will also change. Obviously, this high coupling increases the later maintenance costs.

2, the width of the calculation and uncertainty

Window.innerwidth returns the interior width of the window (excluding the browser's frame), in pixels. However, the unit of the width property is not fixed. Some sites, may use em,% or the latest vw,rem,in and so on.

And the width of these units to be converted to PX needs to be calculated, and many of these units are relative, for example, EM is related to the font size, such as EM is related to the font size, if the font size of the page is manually changed by the user (poor eyesight user, or "CTRL + Plus"), You may not be accurate at the width of the 12 pixel scale. This is the uncertainty of the width calculation.

Method two, body tag + pseudo-class +content content generation

Because each page has a body tag, marking on the label is easy for the whole station to be universal.

The pseudo-class here refers to: After,:before also, because, the use of the CSS property and the actual use of conflict probability than the Z-index attribute is much smaller, more secure.

The biggest benefit of using content generation is that we can arbitrarily define what's inside (Z-index only values), for example:

{content: "Pu";}

Obviously, this descriptive text is very broad, general strong, not because the 1024px becomes 980px and then change, and, the meaning is obvious, at a glance.

Thus, the above analysis concludes that Body:after+content is a fairly good method.

The only technical difficulty we have left is how to use JS to get content.

The method of use is the getComputedStyle in the title:

var content=window.getcomputedstyle (Document.body, ": After"). GetPropertyValue ("content");

Then, we can accurately capture the media queries out of bounds and make the relevant JS interaction according to content.

if (content = = = "Narrow Screen") {    //  ... Else if (content = = = "Pu") {    //  ... Else if (content = = = "Widescreen") {    //  ...}

Instance:

<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><title>_ Pseudo-Class +JS realization CSS3 Media queries cross-boundary accurate Judgment Instance page</title><Scriptsrc= "Js/jquery-1.8.3.min.js"></Script><styletype= "Text/css">/*. Demo img{width:512px;}*/@media screen and (max-width:1024px){Body:after{Display:none;content:' Normalscreen ';}    /*. Demo img{width:256px;}*/}</style></Head><Body><DivID= "Demo"class= "Demo"></Div></Body><Script>varOdemo=document.getElementById ("Demo"), Oimage= NULL, Screentypecache;//declaring VariablesvarFunimage= function() {    varScreentype=window.getComputedStyle (Document.body,": After"). GetPropertyValue ("content"); //get content in the body pseudo-class    if(Screentypecache!==Screentype) {        varsrc= "http://image.zhangxinxu.com/image/study/s/"+ (/Normalscreen/. Test (Screentype)? "s256": "s512") +"/mm1.jpg"; if(Oimage=== NULL) {Oimage=Document.createelement ("img");        Odemo.appendchild (Oimage); } oimage.src=src; Screentypecache=Screentype; }};if(window.getComputedStyle) {Window.addeventlistener ("Resize", Funimage); Funimage ();} Else{odemo.innerhtml= '<p> Sorry, your browser does not currently support this feature! </p>';}</Script></HTML>

Learning--pseudo-class +js realize CSS3 Media queries cross-boundary accurate judgment