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