Method for Processing Mobile Adaptive Layout-calc () and vw, calcvw

Method for Processing Mobile Adaptive Layout-calc () and vw, calcvw

When processing mobile adaptive la s, the most popular front-end method should be to use media queries to set the HTML font size, and then set the Dom width and height in the unit of rem, the advantage of this method is that it has good compatibility. The disadvantage is that there are too many different models on the current market and there are many types of dimensions. Therefore, the workload is relatively large if you want to adapt the models. At present, some people may choose to use percentages for layout. This layout method is very useful only for dealing with the width and height of elements, but when JavaScript needs to set the size of dom elements, the limitation of the percentage is that the font-size of the dom element cannot be set by the page width percentage, that is, when the width and height of an element account for 50% of the page, different lines are displayed on the screen of a cell phone of different widths. As follows:

This is displayed in iPhone 4,

 

 

 

This is displayed in iPhone 6,

Therefore, how to make all elements of the page adaptive is a problem that needs to be solved. In this case, a new unit of length in C3 is VW. The Unit is described as follows:The width relative to the view. Each view is divided into 100 VWS,That is to say, in a 375-width screen, 1vw equals 3.75px, and in a 320-width screen, 1vw equals 3.2px. In this case, a uniform unit is used to measure screens of different sizes. In this case, we combine rem to set the font size font-size: calc (100vw/18.75) for HTML) -- This is calculated based on the iPhone6 size as the design drawing. At this time, 1rem is 20px on the iPhone6 size page. by restoring the design drawing, at this time, the page element size can be proportional to any width of the terminal.

This is the display effect in iPhone 4 through this setting:

This is done by setting the Display Effect in iPhone 6:

We can see that the two models have the same display effect.

Of course, the biggest problem with this method is compatibility.

At present, the compatibility of VW units is still not optimistic, but this problem basically does not exist for some of its peers who are using hybrid apps, and as devices are updated and iterated, I believe that in the future, the layout will gradually become popular.