About the use of CSS3 units VW and VH

This article mainly introduces the use of CSS3 new unit VW, VH tutorial, this article through the example code to introduce the meaning of VW, VH, Vmin, Vmax and the difference between VW, VH and% percent, interested friends to see it together

Units for responsive layouts the first time we would think of a REM unit for adaptation, but it also needs to embed a script to dynamically calculate and size the element.

Like what:

(Function (doc, win) {let  docel = doc.documentelement to  resizeevt = ' orientationchange ' in window? ' Orientationchange ': ' Resize ' let  recalc = function () {    var clientwidth = docel.clientwidth    if (!clientwidt h) return    docEl.style.fontSize = * (clientwidth/320) + ' px '  }  if (!doc.addeventlistener) return  win. AddEventListener (Resizeevt, Recalc, False)  Doc.addeventlistener (' domcontentloaded ', Recalc, False)}) (document, Window

Is there a unit that does not require JS and CSS to be coupled together? The answer is yes, it's VW/VH.

VW = View WIDTHVH = view Height

These two units are CSS3 introduced, the above called viewport units allow us to be closer to the size of the browser window definition.

The meaning of 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: Percent of window width (1vw for window width 1%)

• VH: Percentage of window height

• Vmin: A smaller value in the current VW and VH

• Vmax: A larger value in the current VW and VH

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) The advantage of VW, VH is to be able to directly obtain the height, and% in the case without setting the body height, is not able to correctly obtain the height of the visible area, so this is quite good advantage.

Vmin, Vmax use

When developing a mobile page, if you use VW, WH to set the font size (such as 5VW), the font size displayed in the vertical screen and the horizontal screen state is different.

Since Vmin and Vmax are currently smaller VW and VH and the current larger VW and VH. Vmin and Vmax can be used here. Make the text size consistent across the screen.

Browser compatibility

(1) Desktop PC

• Chrome: Perfect support since the 26 release (February 2013)

• Firefox: Perfect Support since the 19 release (January 2013)

• Safari: Perfect Support since version 6.1 (October 2013)

• Opera: Perfect Support since the 15 release (July 2013)

IE: From IE10 onwards (including Edge) to now only partially supported (Vmax not supported, VM instead of Vmin)

(2) Mobile devices

Android: Perfect Support since version 4.4 (December 2013)

IOS: Perfect support since the IOS8 version (September 2014)

How to use viewport units to fit a page

Use VW only as a CSS unit

1. Convert to VW Unit (SASS function compilation) According to the size of the design manuscript

IPhone 6 size as a design baseline $vm_base:375; @function vm ($px) {    @return ($px/375) * 100VW;}

2. Use VW for both text and layout aspect, spacing, etc.

< P class= "Mod_nav" > < nav class= "mod_nav_list" v-for= "N in 5" > < a href= "#" Clas s= "Mod_nav_list_item" > < span class= "Mod_nav_list_item_logo" > < img src= "htt P://JDC.JD.COM/IMG/80 "> </span> < p class=" Mod_nav_list_item_name "> Guide    Air Inlet </p> </a> </nav></p>.mod_nav {background: #fff;        &_list {Display:flex;        PADDING:VM (10) VM (VMS);            &_item {flex:1;            Text-align:center;            FONT-SIZE:VM (10);                &_logo {display:block;                margin:0 Auto;                WIDTH:VM (40);                HEIGHT:VM (40);                    img {display:block;                    margin:0 Auto;                max-width:100%; }} &_name {MargiN-TOP:VM (2); }        }    }}

Best practices-paired with VW and REM

Using a VM as a CSS unit of code is really a lot less, but you'll find that it's automatically scaled using viewport units, depending on the viewport size, losing the maximum minimum width limit.

So, Lenovo is not as good as the combination of REM units to achieve the layout? The core of the REM elastic layout is the dynamic change of the root element size, then we can pass: •

The size of the root element is set by the VW unit that changes as the viewport changes so that it can dynamically change its size.

Limit the maximum minimum value of the root element font size, with body plus maximum width and minimum width

This allows us to achieve the maximum minimum limit on the layout width. Therefore, based on the above conditions, we can conclude that the code is implemented as follows:

REM Unit conversion: 75PX is just a convenient operation, 750px-75px, 640-64PX, 1080px-108px, and so on $vm_fontsize:75; IPhone 6 Size base element size Datum @function rem ($px) {     @return ($px/$VM _fontsize) * 1REM;} root element size using VW unit $vm_design:750;html {    font-size: ($VM _fontsize/($VM _DESIGN/2)) * 100VW;    At the same time, the maximum minimum value of the root element is restricted by media Queries @media screen and    (max-width:320px) {        font-size:64px;    }    @media screen and (min-width:540px) {        font-size:108px;    }} Body also increases the maximum minimum width limit, to avoid the default 100% width of the block element following the body and over the small body {    max-width:540px;    min-width:320px;}

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!

Related recommendations:

about how CSS code writes specifications