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

Source: Internet
Author: User
Tags vmin

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></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></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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.