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