Methods for handling Mobile adaptive Layouts-calc () vs VW

When dealing with mobile adaptive layouts, the most popular method of the current front end is to use media queries to set the font size of the HTML, and then use REM to set the DOM's width, the advantage of this method is good compatibility, disadvantage is that the current market on the different models too much, the size of a variety of miscellaneous , so in order to achieve the size of the model can adapt to the relatively large workload. At present, some people will choose to use a percentage of the layout, this layout method is only to deal with the width of the element is very useful, but when JS to the size of the DOM elements to set, the limitation of the percentage is out, There is the DOM element of the Font-size not be able to use the page width percentage of his size setting, that is, an element of the width of the ratio page 50%, a piece of text will be different width of the phone screen display a different number of rows. As follows:

This is the display in the IPhone4,

This is the display in the IPhone6,

So how to make the page all the elements can be adaptive, this is the problem that needs to be solved at present. At this time, C3 in a new length unit--VW. The description of this unit is: relative to the width of the viewport. Viewport is divided into 100 units of VW, that is, in the 375-width screen, 1vw equals 3.75px,320 screen, 1vw equals 3.2px. So for different sizes of the screen has a unified unit to measure, then we combine REM, that is, the HTML font size FONT-SIZE:CALC (100vw/18.75)-This is the size of the IPhone6 as the design of the calculation, At this point in the iPhone6 size of the page 1rem is 20px, through the restoration of the design, the page element size can be proportional to any width of the terminal.

This is shown in iPhone4 with this setting:

This is done by setting the display effect in IPhone6:

As we can see, the display on both models is exactly the same.

Of course, the biggest problem with this approach is still compatibility.

At present, the compatibility of VW units is still not optimistic, but for the part of the hybrid app, the basic does not exist this problem, and with the device update iteration, I believe in the future through this method of layout will gradually spread.

Methods for handling Mobile adaptive Layouts-calc () vs VW