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

Source: Internet
Author: User

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.

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.