Viewport-related units VW, VH. Introduction and practical application scenarios

One, n more chatter

Some of the new units in the CSS3 were introduced in the spring of last year, see: CSS length values and time, frequency, and angle units. Obviously, it mentions the unit VW, VH, which is to be lamented in this article, see:

But "I see you" is not the same as "I Touch You". Coincidentally, a coincidence, recently with these two units to see. Roughly, it seems that the VH unit can achieve the overall highly adaptive layout I had previously hoped to achieve. Thought of here, I can not help but small excitement under, so decided to take the time to study (although recently the whole ipad busy butt urine ~ ~).

However...... //zxx: First sell a Xiaoguanzi, 1.1 nagging come ~ ~

VW, VH what is the potential of this unit that can be used to achieve dynamic layout? I do not want to directly confide in, please follow my study marks and psychological history together to find the answer ~ ~

Ii. compatibility that needs to be known in advance

vw, vh the vmin(vm) compatibility of these several viewport-related units on September 23, 2012 is: Chrome 20+, ie9+ and Safari 6 support!

The famous CSS Properties usability query site Caniuse gives a specific compatibility table, click here to view.

Therefore, in the later of this article to show the n demo, there is no need to view the lower version of IE browser ~ ~

Iii. Clear Meaning

See the text marked with a yellow background (the "viewport" is replaced with the word "viewports"):

VW's width relative to the window: window width is 100VW

My first reaction was this: if the viewport width is 100vm , then it 1vm is the viewport width 1/100 , that is 1% , similar to width: 1% . But the "Windows" that appear here many times are Nani's meaning?

is the browser internal width size ( window.innerWidth )? is the width size of the entire browser ( window.outerWidth )? Or the width of the display ( screen.width )? I doubt it!

Whenever I wonder, I'm not looking for a "I think it should be" explanation, but rather, a new HTML page, like a student's time to do biological experiments, multi-conditional contrast verification.

In order to facilitate the rapid understanding of other peers, the test demo page I specifically added the interaction, you can click here: VW so-called window what meaning? Demo

For the effect that is turned on by default under IE9 browser:

Obviously, the "viewport" here cannot be the width of the outside of the browser, and the computed value does not match.

We'll change the width of the browser and we'll see:

Now, the truth is,"viewport" refers to the size of the viewable area within the browser , that is, the size window.innerWidth/window.innerHeight , not the taskbar title bar, and the browser area size of the bottom toolbar.

Modify vw The corresponding width value, the size of the picture can further verify the above conclusion:

Note: in general, the Chrome browser is the same width inside and outside the browser (because there is no border around the browser), and the size of the browser is not rendering the image size of the bug, so the demo best Test browser is IE9. ///ZXX: Not easy Ah, IE department finally got an erection ~ ~

Four, connecting link

Viewport-related units vw , the vh current browser support is relatively weak, it is basically impossible to find the relevant practical application from the existing site. So, when I'm all right, I'm going to have to think about where the unit can be. What if it is used with other CSS3 properties?

First, it's easy to imagine that the width of the adaptive layout, for example, a two-column 1:3 width adaptive layout:

. sidebar {    width:25vw;    Float:left;}. Main {    width:75vm;    Float:right;}

However, the block horizontal element itself is self-adaptive, plus there is vm % no advantage compared here. Therefore, the vw unit used as the width of adaptive layout, is completely thankless to show off!

What we need to think about is some other application scenarios that can only be vw vh done, and that's what's going to be shown in turn.

V. Scenario: size Limitations of elements

We should have done or seen this interaction: Click, the frame to view the original large image, or one screen (cannot have scroll bar) large slide view. One of the headaches of this kind of demand is the size limitation of the original big picture--because it's possible that the image is too large, and that the one-screen display area is not enough, we need to scale it. For example: Click here to view (no matter how small the browser size, the picture will always be displayed in one screen).

The implementation of such restrictions, in the present, need to get the original size of the image, as well as the browser internal size, size, calculation, such as the ratio, is a more toss.

However, vw the vh unit itself is the browser viewport size related units, the direct use of its restrictions, not save the N-JS code??

img {MAX-HEIGHT:90VH;}

You can ruthlessly click here: VW, VH and picture size limitations Demo

For example, under the Firefox 15 browser of a temporary unsupported vh unit, click on the thumbnail and you will see that the high picture is completely out of the screen (not restricted – the parent container does not have a fixed height value, so 90% soy sauce):

Even the box was ruined!

and vh the support unit of the IE9 browser it ~ ~ when when, see below:

IE Browser this time finally is "daughter-in-law boil Cheng", not easy, everybody clap ...

Related picture limitations CSS are as follows:

. vw_vh_img {    max-width:90vw;    MAX-HEIGHT:90VH;}

Note: The bullet box script used in the demo page is the final script shown in the article "Seajs use example and SPM Merge Compression tool".

Vi. viewport coverage and boundary positioning

Since vw it vh is the relevant unit of the viewport, I think it is possible to use this feature to achieve accurate viewport size coverage and the location of the viewport boundaries.

Take the viewport overlay For example, if I define a high width of an element as follows:

. element {    width:100vw;    HEIGHT:100VH;}

Then, it is not possible to achieve the full coverage of the viewport by positioning it in the upper-left corner of the viewport; I immediately thought of the translucent overlay of the popup box. You can ruthlessly click here: VW, VH full overlay with pure CSS bullet box

It is recommended to view the effect under chrome20+ browser (because there is a range control), click the Demo page button, then the translucent overlay appears-full coverage:

Spit Groove:

1. If you view this demo under Firefox browser, you will find that the black translucent under the Firefox browser is also completely covered (figure ~), why? Its currently not supported vw , vh units of Ah!?
   The reason is that the overlay is anchored (fixed) (The absolute positioning (absolute) element is the same). In this demo, the high and wide 100% effect is exactly the same as width: 100vw; height: 100vh; the setting. I am a little disappointed!
2. OK, see the above demo title can be found that the most important knowledge of this demo is not in fact, the introduction of the vw vh two units, but shows that if the use of pure CSS to achieve the horizontal and vertical center of the frame effect (IE6 is also supported, but the writing needs to change ~ The opportunity to introduce in detail later). Drag the range control, you can see the picture size no matter how the change, the box is always centered-pure CSS implementation, no JavaScript calculation and positioning, you are interested to study the ~ ~
   
   

As mentioned above, in some cases, the resulting effect is the same as the vw vh percentage % unit, especially for the absolute/fixed element that locates the attribute, such as the following example of a boundary positioning:

You can ruthlessly click here: VH, VW equivalent percent unit test demo

ZXX: I am here more to demonstrate, in fact, to achieve the effect, the simplest is bottom:0 .

The key CSS code is as follows:

{    height:30px;    Margin-top: -30px;    position:fixed;    top:100%;    TOP:100VH;    left:5%;    LEFT:5VW;    right:5%;    RIGHT:5VW;}

Code meaning is very simple, support, the use of the vh vw unit (because it is declared later); not supported is the percentage % unit.

Then each browser test found that the effect is identical (does not support position:fixed IE6 when it does not exist), fixed at the bottom of the viewport, does not scroll with the scroll bar blank toolbar:

To tell the truth, originally the first eye to see units vw , vh when, feel that this unit, may trigger the current layout of the big change-the horizontal direction of the fluid layout!!

In the production of high-width limit demo, I also think, it should be possible. When I do the cover and position the two demo, my heart cools down all of a sudden:

1. vw, vh there is no value in width adaptation-- % can be realized ~ ~
2. Now again: vw vh absolute/fixed There is no value in locating attribute elements-- % can be realized ~ ~

vw, vh the two viewport-related dynamic units seem to have a lot of bleak prospects for application, and the potential seems to be the same-to come to a conclusion:VW, the VH viewport size-dependent units only apply to the height-dependent properties of non-locating elements! //zxx: Highly correlated attributes such as –height/min-height/max-height/line-height/padding-top/padding-bottom, etc.

So, the scenario I envision below would be out of width, out of the absolute positioning element, what would it be??

Vii. scene: Office word effects

We can make the Web page look like an Office document, just one screen at a time, and drag the scroll bar so we can see the last page down.

If you only use CSS, the effect of absolute positioning is not possible. Because its top value is dynamic (100%, 200%, 300% ...), it must be done with JavaScript. Using vh units to capture the height of the browser's viewable area without leaving the document stream is the best tool for Office Word!

You can ruthlessly click here: VH units simulate Office Word effects Demo

It is recommended to use the Chrome20+ browser to view the VH unit positioning of the background image under the Demo,ie9 browser bug!

You'll see an effect that looks something like this (it works better when you manually change the height of the browser):

The relevant CSS code is as follows:

page {    display:block;    HEIGHT:98VH;    WIDTH:69.3VH;    MARGIN:1VH Auto;    PADDING:12VH;    border:1px solid #646464;    box-shadow:0 0 15px Rgba (0,0,0,.75);    Box-sizing:border-box;    Background:url (office/bl.png) no-repeat 8vh 88vh,                url (office/br.png) no-repeat 59vh 88vh,                url (office/tl.png ) no-repeat 8vh 8vh,                url (office/tr.png) no-repeat 59VH 8VH;    Background-color:white;    Position:relative;} Page:after {    content:attr (data-page);    Color:graytext;    font-size:12px;    Text-align:center;    BOTTOM:4VH;    Position:absolute;    LEFT:10VH;    RIGHT:10VH;}

The HTML code is as follows:

<page></page><page></page><page></page>

The JavaScript code creates the Data-page property value, as follows:

var elepages = document.queryselectorall ("page"), Lenpage = Elepages.length;for (var i=0; i<lenpage; i+=1) {    elePa Ges[i].setattribute ("Data-page", "first" + (i+1) + "page, total" + lenpage + "page");    

Description

1. This demo app has many CSS3 attributes, some HTML features, and a high-level JavaScript API, so some older browsers are obviously not supported, and practical projects that apply to the outside world are impractical. However, it is OK to make a presentation, or to share a display tool.
2. The width of the demo page is based on the scale of the standard paper 21:29.7 , so all unit values are the vh units used.
3. This demo <page> element can also be set float:left or inline-block both ends/center aligned, and so on, so that multiple page pages are displayed horizontally in one screen, just like the actual office Word.

Eight, the scene: Horizontal time axis

Horizontal direction of the fluid layout, is pondering tossing, there are many technical difficulties, a few days ...

For the demo prototype, which, the top left corner of the first has been formed by the vertical layout is obviously to adjust to the horizontal type, how to operate, please wait for me to think again, you can also think together!

Ix. Conclusion

The relevant units of the viewport, in addition to the articles mentioned several times, vw vh there is a vmin (vm– is said to have browser FONT-SIZE:VM support), indicating the width of the viewport or the height of the smaller. Since I really can't think of a scenario that I can use vmin , it's not specifically described.

Add:
@Zearlin VM: ... Personal sleep is very important, especially mobile platform, can achieve orientation after the content of automatic auto-fit effect, such as ibook read PDF.

Since the last time I wrote about the bottleneck of CSS learning, there are still a lot of people asked me, saying that they do feel that there are problems, need to break through, I do not know where to start?

To me personally, the contents of this article are illustrated by:
Logically speaking, the relevant units of the area vw , vh is completely a new thing, compatibility is not good, and is a unit, meaning is not difficult to understand, should not be able to learn anything worth learning. In fact, as far as I am concerned, I have learned a lot of things.

1. vw, vh the exact meaning
2. Compatibility
3. Relationship to percent width
4. Relationship to an absolutely positioned element
5. What elements should be more valuable
6. Chrome browser under Browser form to change possible non-rendering bugs
7. IE9 of VH units under fixed error
8. The internal element of the VH height value does not support percent% height
9. Some of the new properties of CSS3, especially CSS3 background related
10. Think and practice the horizontal vertical center alignment of the frame screen under the pure CSS
11. Practice the vh possibility of using horizontal fluid layouts
12. Learned the list horizontal axis alignment technology
13. And what may be learned in the next ~ ~

Take more effort, more ideas (perceptual cognition, if so ...) Or that ... ), multi-Practice (production demo), more summary (writing), and then deep extension (horizontal flow layout → horizontal timeline); Over time, the level of natural greatly improved, the bottleneck will naturally break through.

For technical articles, the technology itself is sometimes secondary; instead, there are some ideas that give people a longer-term and lasting positive impact.

This article as far as possible from my own, in the first person to narrate, before and after, basically is their usual learning new things routines. The content of this article from the technical level, is indeed a thin sheet of paper, but hope that their usual learning routines, thinking, practice, etc. can be the first entry to the front of the new people some enlightenment.

The article finally mentions, the horizontal time axis realizes, if the recent practice effect is good, I may open a new article, the key introduction, because I thought should be more interesting!

It's 1 o'clock in the morning, I have to take off. Thank you for reading, if there are errors, please correct, common progress!

Original article, reprint please indicate from Zhang Xin Xu-Xin space-Xin Life [http://www.zhangxinxu.com]
This address: http://www.zhangxinxu.com/wordpress/?p=2636

Viewport-related units VW, VH. Introduction and practical application scenarios