Pseudo-Class +JS implements CSS3 media queries cross-boundary (1/2)

Although the domestic application of this technology is like a cigarette lighter, can not be compared with a raging in Europe and America. But, after all, the trend is to move forward, there will always be the time to blossom, but only for the duration.

The three key technical points covered in this article, pseudo class (ie8+), JS (getComputedStyle, ie9+), and Media Queries (ie9+) all require the support of modern browsers. Therefore, if you are not doing HTML5 development, or are engaged in the general public-oriented Web page, this article content has no practical value. Helpful, the estimate is to widen the train of thought, the growth horizon. Therefore, this article will soon be attributed to silence, perhaps 5 years later, some June accidentally entered here, found this article, will not be able to marvel-the original many years ago someone introduced this technology! However, the development of history and the promotion of those who are buried in the history of the pioneers.

Media queries allows devices to apply different CSS styles, layouts, etc. in different sizes. To adapt to handheld devices, Pu monitors, widescreen displays, as well as the future of the refrigerator on the network display, automotive Digital equipment. Then, just making a layout out of CSS may not be able to handle all the interaction requests.

For a simple example, we might be in a non maximized position to open a browser, at which point, if processed as a Pu, the loaded picture might be the 128*128 small size picture. But when we maximize to get a better reading experience, we need to use a larger size picture 256*256, using media queries? Please, CSS can only change the external size, do you want twice times the size of stretching? Obviously, a more reasonable approach is to load the 256*256 size of the medium sized picture. In the current technology, it is estimated that in addition to using JS to modify the picture src, it is difficult to have other more available methods.

OK, now the problem, how to let JS changes and CSS layout changes synchronized it?

Two, CSS interaction and JS Interactive synchronization problem
How to make CSS style, layout changes, while accurately triggering JS interaction?

Method one, direct width/height value matching
He Yi? CSS3 Media queries cross-border triggers typically have a width or height value, or color (rarely used). For example, Pu picture width 128*128 may be the following CSS:

The code is as follows	Copy Code
@media screen and (max-width:1024px) { IMG { width:128px; height:128px; } }

This means that when screen width is no more than 1024 pixels (max-width:1024px), the picture width is 128 pixels and the height is 128 pixels.

Therefore, we may capture the browser window size through the browser window size Change Resize event, in contrast to 1024, if less than then trigger the corresponding Pu event processing, greater than, then widescreen processing.

The code is as follows	Copy Code
Window.addeventlistener ("Resize", function () { Window.innerwidth ie9+ Browser support if (window.innerwidth <= 1024) { Pu processing } else { Widescreen processing } });

is really a simple and efficient method. However, there are also deficiencies.

① serviceability
The corresponding value of a carrier is often changed. For example, small fat today weighs 148 kilograms, tomorrow drinks the green source toilet to return a few hours, probably only then 145 catty. Similarly, for a value of 1024, the odds of change are great. Change in fact nothing, trouble is the following JS in the value of the judgment and CSS in the limit is to be consistent. That is, the CSS width threshold changes, JS also need to follow change. Obviously, this high coupling increases the cost of maintenance later.

Calculation and uncertainty of ② width
Window.innerwidth returns the inner width of the window (excluding the browser's box), in pixels. However, the unit width property is not fixed. Some sites may use EM,% or the latest VW, REM, in etc. (full unit see previous "CSS length values and time, frequency, angle units").

And the width of these units converted to PX needs to be computed, and these units are a lot of relative, for example, EM is related to font size, if the font size of the Web page is manually changed by the user (poor eyesight users, or "Ctrl + Plus" error), you may be in accordance with the width of 12 pixels before the calculation will be inaccurate. This is the uncertainty of width calculation.

It is obvious that we need to find a better way to sync. What, just through CSS itself!

Through the CSS itself?
For example (although this example is not practical), we can use media queries to change the width of the picture to 128 pixels to determine the current device status by detecting the width of the picture application.

Of course, here is just an example, in fact, this is more than the 1024px method of rubbing, because, the actual style of CSS will often change, JS obviously can not be coupled with high.

So how do you apply it? Very simply, applying an element that will not be used will have no additional effect on the CSS properties. For example, use the Z-index property (from Stephanie) on the

The code is as follows	Copy Code
@media screen and (min-width:45em) { Head { Z-index:2; } }

However, according to Jeremy Keith's test, the WebKit browser does not seem to support the return of the Z-index value is auto, not a value of 2. My warm little heart, frozen in an instant, ah ~ ~

Application in <body> tag to be able to, however, because the body tag exposed outside, participate in CSS layout, how it set the positioning properties (relative, absolute, etc.), Z-index immediately erection, if the inside at the level of complex points, oh ha, Dude, you're going to have to spend your sister's time with code!

However, for the General page (not similar to the game page, Slide page page), only certain art talents dare to increase the positioning attribute on the body (violate the principle of minimizing influence –part 7), therefore, set the Z-index property on the body general problem is not big, but, from the understanding of speaking, Z-index a little weak. Because the Z-index value is generally numeric. You said:

800~1024 z-index:1;
1024~1280 Z-index:2;
1280~1440 Z-index:3;
1440~1680 Z-index:4; Two months later, you look at JS, ZIndex 1, 2, 3, 4, do you remember the corresponding range of values? Does someone else handle your code and know the meaning of each value? (Don't give me a comment ~ ~)

Therefore, we need to look for better solutions.

Method two, body tag + pseudo class +content content generation
Because each page has a body tag, marking the label is easy to use for the whole station.

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

Content Generation I wrote a special article: "CSS Content Generation technology and application", and then the result of pseudo-class attributes wrote: ": After pseudo class +content content generation Classic application." You are interested to see. And here, it's a new application paradigm.

The best thing about using content generation is that we can arbitrarily define what's inside (Z-index only values), such as:

{content: "Pu";}
Obviously, this descriptive text is very broad, general strong, not because 1024px into 980px and then change, and, the meaning is obvious, at a glance.

Therefore, 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. When when, a few days ago, "Get the element CSS value of the getComputedStyle method familiar with the" text will be useful.

home 1 2 last