Mobile browser adaptation_html/css_WEB-ITnose

meta

You often see a code like this when making mobile web pages

width=device-width sets the width of the view equal to the width of the device screen

initial-scale=1 Set the initial scaling to 1

minimum-scale=1 Set the minimum scaling to 1

maximum-scale= 1 Set the maximum scaling ratio to 1

user-scalable=no Do not allow scaling

Do a simple and crude transformation

Set the width of the view to 320, the maximum zoom ratio to 1.3, and do not set the initial zoom ratio.
This allows the entire view to be scaled

rem

Font unit

px no inheritance, commonly used

em inheritance, relative to Parent element inheritance

rem inheritance, compared to root inheritance, is generally html, css3 attribute, supports IE9 and other modern browsers

vh 1vh=window height/ 100, is css3 attribute, supports IE9, chrome20, firefox19, safari6, android browser4.4

vw 1vw=window width/100

Use rem

Use js to calculate the font-size of the root element to adapt to various screens

Use vh

vh is originally the height of the window, and it can be adapted according to the height of the window of different screens

p.s. As expected, I still don’t know how to blog