Introduction to the use of VW, VH, Vmin and Vmax in CSS3 new unit

meaning of 1,VW, VH, vmin, Vmax(1) VW, vh, vmin, Vmax is a kind of window unit, is also a relative unit. It is relative to either the parent node or the root node of the page. Instead, it is determined by the size of the window ( Viewport), Unit 1, which represents similar to 1%. windows ( Viewport) is the area where your browser actually displays content-in other words, your web browser that does not include toolbars and buttons. (2) The specific description is as follows: VW: Percentage of window width ( 1vw for window width 1% VH: Percentage of window height vmin: A smaller value in the current vw and V H Vmax: A larger value in the current VW and VH 2, the difference between VW, VH and% percent(1) % is relative to the size of the parent element set ratio, VW, VH is the size of the window is determined. (2) Theadvantages of VWand vh lie in being able to obtain the height directly, and with % without setting the body height, is not able to correctly get the height of the viewable area, so this is quite a good advantage. 3, Vmin, Vmax use When developing mobile pages, use   VW , wh  set the font size (such as   5VW ), the font size displayed in portrait and landscape mode is different. since vmin and Vmax are currently smaller VW and VH and the current larger VW and VH. vmin and Vmaxcan be used here. Make the text size consistent across the screen. 4, a simple examplewindows ( Viewport) units can be used in addition to setting the width and height of the elements. Below, use VW to set the font size to implement responsive text.

<! DOCTYPE html>"Utf-8"> <title>hangge.com</title> <style>html, body, Div, span, H1, H2, H3 {margin:0; padding:0; border:0;       }. demo {width:100vw; Font-SIZE:5VW; Margin:0Auto; Background-color: #50688B;      Color: #FFF;       }. demo2 {width:80vw; Font-SIZE:5VW; Margin:0Auto; Background-color: #ff6a00;       }. Demo3 {width:50vw;       HEIGHT:50VH; Font-SIZE:1VW; Margin:0Auto; Background-color: #ff006e;      Color: #FFF; }    </style> class="Demo"> class="Demo2"> class="Demo3"> 

5. Masking layer for complete coverage

sometimes to highlight a popup, or to prevent the page element from being clicked. We need a translucent matte covering the entire viewable area, which can be easily implemented with VWand VH .

<! DOCTYPE html>"Utf-8"> <title>hangge.com</title> <style>html, body, Div, span, button {margin:0; padding:0; border:0;        } button {width:120px;        height:30px;        Color: #FFFFFF; Font-family:"Microsoft Ya-Black"; Font-size:14px;      Background: #28B995;        } #mask {width:100vw;        HEIGHT:100VH; Position:fixed; Top:0; Left:0; Background: #000000; Opacity:0.5;      Display:none; }    </style> "document.getElementById (' mask '). style.display= ' inline '"> Click Show Matte </button> <div id="Mask"onclick="document.getElementById (' mask '). style.display= ' None '"/></div> </body>

Introduction to the use of VW, VH, Vmin and Vmax in CSS3 new unit