How to use Windows unit to layout in CSS3

Easy to ignore seven CSS very useful units http://www.111cn.net/cssdiv/css/87284.htm

The Windows (Viewport) unit has been there for several years, but we don't see it being used often. They are now supported by all major browsers and provide unique functionality to make it useful in specific situations, especially those involving responsive design.

Introduction window (Viewport) unit

Windows (Viewport) is the area where your browser actually displays content--in other words, your Web browser that doesn't include toolbars and buttons. These units are vw,vh,vmin and Vmax. They all represent the scale of the browser (Viewport) size and the resizing of the window resizing.

Let's say we have a 1000px (width) and 800px (High) window (Viewport)

The width of the vw--represents the window (Viewport) is 1%, in our example 50VW = 500px.
The percentage of the height of the vh--window is 50VH = 400px.
The Vmin--vmin value is the smaller value in the current VW and VH. In our case, the 50vim = 400px because it is in landscape mode.
vmax--a large size percentage. 50vmax = 500px.

You can use them in any place where you can use pixel values, such as width,height,margin,font-size and so on. They will recalculate the values by resizing the windows or rotating the device's browser.

occupy the entire height of the page

Every front-end developer is committed to the matter. Your first instinct is to do this:

#elem {
height:100%;
}

However, unless we add a 100% height to the HTML and body, this is not going to work because the code is not elegant and is likely to break the rest of your design. Using VH becomes quite easy, just set 100VH for height, and it will always be the height of your window.

#elem {
HEIGHT:100VH;
}

This seems to be a perfect full-screen image of the hero, and looks very stylish.

child element size is changed by browser instead of parent element

In some cases, you want the child element's size to change relative to the window rather than the parent element. Similarly, as in the previous example, this is not possible:

#parent {
width:400px;
}
#child {
/* This is equal to 100% of the parent width and not the whole page. */
width:100%;
}

If we use VW to set the child element, it will simply overflow and take the full width of the page:

#parent {
width:400px;
}
#child {
/* This is equal to 100% of page, regardless of the parent size. */
WIDTH:100VW;
}


Response Font Size

Windows (Viewport) units can also be used in the text! In this example we use the VM to set the font size to create a good line of CSS responsive text. Bye, fittext!.

response is centered vertically

By setting the Width,height and margin Windows (Viewport) units of the elements, you can set the center without using any other technique.

Here is a rectangle with a height of 60vh up and down margins of 20VH, which add up to 100VH (60+2*20) so that it can always be centered even if the window is resized.

#rectangle {
WIDTH:60VW;
HEIGHT:60VH;
MARGIN:20VH Auto;
}


Equal width column

You can use Windows (Viewport) units to set up response grids. Their behavior is similar to the percentage but always relative to the size of the window (Viewport). So you can put them in a parent element that is wider than the window, but it still has the grid to maintain its width. It's handy to create a full-screen slider.

This technique requires elements to align elements that are adjacent to each other with Float:left:

. column-2{
Float:left;
WIDTH:50VW;
}
. column-4{
Float:left;
WIDTH:25VW;
}
. column-8{
Float:left;
WIDTH:12.5VW;
}


Summary

The Windows (Viewport) unit has its uses and is worth trying. They are easy to understand and, in some cases, very helpful for solutions that are more difficult to replace CSS, or technologies that are impossible to implement.