Mobile-Suitable Formula method

To do mobile projects found the biggest problem is the adaptation of the problem, summed up a more useful adaptation method:

First: Drop the PX bar, using REM, the browser's default font height is 16px because 100%=16px,1px=6.25%, so 10px=62.5%,

REM is a font-size only relative to the root element htm, that is, the font-size that only needs to be set to the HTML of the roots, and the other elements or fonts are set to the corresponding percentages using REM;

Example:

2 Body{font-size:1.2rem;} (12px)

3 P{font-size:1.4rem;} (14px)

4 Div{width:5rem} (50px)

Next add in the head tag:

<meta content= "width=device-width,initial-scale=0.5,maximum-scale=1,minimum-scale=0.1,user-scalable=0" Name= " Viewport ">

(The specific values are prepared according to the following instructions)

1, Width: Control the size of the viewport, you can specify a value, such as 600, or a special value, such as device-width for the width of the device

2, Height: and width correspond, specify the height

3, Initial-scale: The initial scaling ratio, the first time the page loads the scale

4, Maximum-scale: Allow the user to zoom to the maximum scale, ranging from 0 to 10.0

5, Minimum-scale: Allow the user to zoom to the minimum scale, ranging from 0 to 10.0

6, User-scalable: Whether the user can be manually scaled, the value can be: ①yes, True allows the user to zoom, ②no, False does not allow the user to zoom

Then use Google Mobile test bench test Perfect fit!

Mobile-Suitable Formula method