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