Adaptation of the mobile-screen

Because of the interest in H5, so when it's okay to read some articles blog.

Don't say much nonsense, first introduce the problem,

About the adaptation of a mobile screen do you have anything to say?
First I have been using this REM scaling method to do, content= "width= device-width", initial-scale=1.0, can achieve the zoom effect for different screens, and does not appear scroll bar,

And in the content part using REM for the equivalence ratio scaling, we know that REM is a unit of relative length, and its size is converted according to the size of the Font-size set by the HTML root element.

The root element (HTML) is set to a font-size, in general, in order to easily calculate the value of REM, the root element is set to 62.5%, because by default, the default text size of the browser is 16px,16*0.625=10px, so there is 1rem=10px, It is easy to calculate with numerical values.

Today, "Mr. Chew" article has mentioned another method of adaptation, VW,VH, see the hunting heart has left the article, the article refers to the method of VW,VH 100% adaptation method,

Two articles related to mobile adaptation are written in the front:

How does the mobile Web do screen Fit (i) focuses on how REM can handle the adaptation of dimensions (width, height, margin, padding, and so on).

How a pixel border is implemented by introducing the implementation of the 1 physical pixel border, which leads to the concept of viewport, physical pixels, css pixels, and their relationships.

This is the third article on mobile adaptation, introducing VW, VH, and then making a summary of three articles.

Screen fitting is a very easy to ignore problem, but it is essential for the product to keep improving. For web developers, it's also a classic question that needs to be understood clearly.


Daini | Second

In fact, dimensions (width, height, margin, padding, and so on) are related to the adaptation, in addition to using REM, you can also use CSS3 VH and VW.

Length units representing 1% of the viewport size for viewport width (VW), height (VH), the smaller of the (vmin), or The larger of the (Vmax).

means that

VW represents 1% of the width of the viewport, i.e. the viewport width is divided into 100 parts, and the 1VW represents the width of 1 parts.

VH is highly. The law is the same as VW.

Wmin is the lesser of VH and VW; Vmax is the larger of VH and VW

At first glance, is not the percentage of CSS?



div{width = 1vw;}

Equivalent to

div{width:1%;}

That's true, but when we want to achieve a picture like nine Gongge, we can feel the magic of it.

For example, to achieve the above picture layout, that is, three images occupy a full screen, and each picture is a square, with VW how to achieve? The code is as follows:

If you use%, purely CSS is not possible unless JS calculates dynamic settings.

What about the compatibility of VW and VH? Look at the results of Caniuse.com's query, the mobile Android 4.3 comes with a browser not supported.

Soga, it looks very simple. So the question is, why did the previous article take so much effort to write REM?


Three | Third

See here, can rest a little paragraph, now to three articles to do a summary

Recalling the previous issue of the implementation of the 1 physical pixel border, it is mentioned that there are two ways to achieve this:

Entire page scaling, viewport setting scale

Single element scaling, transform scale

The scenario in which a single element's bounding rectangle is scaled cannot achieve a rounded corner. The entire page scaling scheme is implemented as a CSS standard.



VW (VH) and REM are addressing the size-dependent adaptation, comparing the difference between VW (VH) and REM:
1. Compatibility, VW is not compatible with Android 4.3 and following your own browser

2. PX-to-REM plug-in is richer

So what is the market share of Android 4.3 and below operating systems in China? The statistical results of the AU are about 31%, and the amount is larger.

So the more secure solution is REM.

So when you get a mobile Web project, my decision-making approach is as follows:

Adaptation of the mobile-screen