CSS3 using VW and VH to implement adaptive code examples

The implementation of the responsive layout relies on media query (Queries) to implement, choose the mainstream device width size as a breakpoint to write extra style to fit, but this will be more troublesome, can only be selected in a few mainstream device size to render the perfect fit. This paper mainly introduces the relevant data of pure CSS3 using VW and VH to realize the adaptive method, hoping to help everyone.

Even with REM units, it is necessary to embed a script to dynamically compute the size of the root element.

In recent years, with the growing sophistication and breadth of support for mobile viewport units, we have been able to try a new approach to truly fit all device dimensions.

Understanding the Viewport unit (Viewport units)

First, we need to understand what is a viewport.

In the industry, a highly respected theory is Peter-paul Koch (Hu Hu called "PPK great God") of the interpretation of the viewport-on the desktop side, the viewport refers to the desktop side, refers to the browser's visual area, and the mobile is more complex, it involves three viewports: Layout Viewport (Layout viewport), Visual Viewport (visual viewport), Ideal Viewport.

In the viewport unit, the viewport, on the desktop side, is undoubtedly the viewable area of the browser, but on the mobile side it refers to the Layout Viewport in three Viewport.

Viewports in viewport units

According to the CSS3 specification, the viewport units consist mainly of the following 4:

1. VW:1VW equals 1% of viewport width

2. VH:1VH equals 1% of the viewport height

3. Vmin: Choose the smallest of VW and VH

4. Vmax: Pick the biggest one in VW and VH

The viewport units are different from the% units, the viewport units are dependent on the dimensions of the viewport, defined according to the percentage of the viewport size, and the% units are dependent on the ancestor elements of the element.

Measured in viewport units, viewport width 100vw, height 100vh (vertical screen on the left, horizontal on the right)

For example, in the desktop-side browser viewport size is 650px, then 1VW = 650 * 1% = 6.5px (This is theoretical extrapolation, if the browser does not support 0.5px, then the actual rendering results may be 7px).

Compatibility

Its compatibility, as shown, is known to be supported on mobile iOS 8 and above and Android 4.4, and is fully supported in the X5 kernel.

Fit pages with viewport units

For mobile development, the most important point is how to adapt to the page, to achieve multi-terminal compatibility, different ways of adaptation, there are shortcomings.

In the case of mainstream responsive layouts, flexible layouts, layouts implemented through Media Queries require multiple response breakpoints, and the experience is very unfriendly to the user: the layout remains constant at the resolution in response to the breakpoint, and the layout brings a change in the switching of the fault in response to the breakpoint switching, Like a cassette player, "Click and click" For a second.

By using the dynamic calculation of the REM unit of the elastic layout, it is necessary to embed a script in the head to change the listening resolution to dynamically change the root element font size, so that the CSS and JS coupled together.

Is there any way to solve this problem?

The answer is yes, through the use of viewport units to achieve the adaptation of the page, is not only to solve the problem of reactive fault, but also to solve the problem of scripting dependencies.

Procedure one: Use VW only as a CSS unit

In this practice, where only VW units are used as a single CSS unit of application, we adhere to:

1. For the size of the design to be converted to VW units, we use the SASS function to compile

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

2. Use VW as a CSS unit for both text and layout aspect, spacing, etc.

. mod_nav {    background-color: #fff;    &_list {        Display:flex;        PADDING:VM (10) VM (VMS); Inner spacing        &_item {            flex:1;            Text-align:center;            FONT-SIZE:VM (10); Font size            &_logo {                display:block;                margin:0 Auto;                WIDTH:VM (40); Width                HEIGHT:VM (40);//Height                img {                    display:block;                    margin:0 Auto;                    max-width:100%;                }            }            &_name {                MARGIN-TOP:VM (2);}}}    

3.1 Physical pixel lines (i.e. 1px under normal screen, 0.5px under HD screen) are implemented using the transform attribute scale.

Code from Http://caibaojian.com/vw-vh.html.mod_grid {    position:relative;    &::after {        //implement 1 physical pixel bottom Border        content: ';        Position:absolute;        z-index:1;        Pointer-events:none;        Background-color: #ddd;        height:1px;        left:0;        right:0;        top:0;        @media only screen and (-webkit-min-device-pixel-ratio:2) {            -webkit-transform:scaley (0.5);            -webkit-transform-origin:50% 0%;        }    }    ...}

4. For graphs that need to maintain a high aspect ratio, use padding-top to implement

. mod_banner {    position:relative;    Padding-top:percentage (100/700); Use Padding-top    height:0;    Overflow:hidden;    img {        width:100%;        Height:auto;        Position:absolute;        left:0;        top:0;}     }

As a result, we are able to implement a common layout of page effects as follows:

Procedure two: With VW and REM, the layout is more optimized

Such a page looks good, but you will find that because it is a layout implemented using viewport units, it is automatically scaled depending on the viewport size, regardless of whether the viewport is too large or too small, and it loses the maximum minimum width limit as the viewport is too large or too small.

Of course, you can not care about such a small and unfriendly user experience, but we still try to repair such a small flaw in the pursuit of it.

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, so we can:

1. 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.

2. 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;}

Summary

As opposed to procedure one, the individual is more respected for practice two, with the following two reasons:

First, the procedure two is relatively more user visual experience, increase the maximum minimum width limit;

Second, and more importantly, if the mainstream REM resilient layout approach is chosen as the adaptation page approach for project development, then procedure two is more appropriate for later projects to transition from REM units to VW units. Just by changing the size of the root element, you can seamlessly transition to another CSS unit without any other processing, not to mention that the use of VW units will inevitably become a better fit, and that it is only supported by compatibility and is not widely used.