How to use Vw+rem for mobile-side layouts

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

• VW:1VW equals 1% of viewport width
• VH:1VH equals 1% of the viewport height
• Vmin: Choose the smallest of VW and VH
• Vmax: Pick the biggest one in VW and VH

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

Use the palatability unit to fit a page

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 maintains no table at the resolution of the response breakpoint, while the layout brings a fault-switching transformation 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 in the JS coupled together.

Is there any way to solve this problem?

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

Use IPhone6 as the benchmark (750)

The first step in general, I will be on the mobile side of the META tag settings

<meta name="viewport" content="Width=device-width, initial-scale=2.0, maximum-scale=2.0, minimum-scale= 2.0, User-scalable=no "> 

Because IPhone6 and most of the DPR are 2, for the second step of the convenience of conversion

The second step is to set the body, HTML font-size

body,html {    FONT-SIZE:13.3333333333333VW//100px}

13.3333333333333vw how come?

100/750 = 0.133333333333333VW We take this palatability as 100px, and then in addition to 750 conversion to 1px = 0.133333333333333vw then the whole palatability equals 0.133333333333333 * 100 = 13 .3333333333333VW = 100px

Finally, the 100px = 1rem

Through this conversion we use VW to convert REM to 100px as a benchmark.

Well, it's good to use on the project.

div {     //width:100px;     Width:1rem; }span {   //height:12px    height:. 12rem}

How to use Vw+rem for mobile-side layouts