1,@media + rem

First, write a meta tag in the head tag.

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1">;

/*
    initial-scale: Initial scale of the first entry page
    minimum-scale: Minimum scale allowed
    maximum-scale: Maximum magnification allowed
    user-scalable: Allow users to zoom, 1 or 0 (yes or no)
*/

@media

@media screen and (min-width:350px){
    html{font-size:342%;}
}
@media screen and (min-width:360px){
    html{font-size:351.56%;}
}
@media screen and (min-width:375px){
    html{font-size:366.2%;}
}
@media screen and (min-width:384px){
    html{font-size:375%;}
}
@media screen and (min-width:390px){
    html{font-size:380.85%;}
}
@media screen and (min-width:393px){    /* Xiaomi NOTE */
    html{font-size:383.79%;}
}
@media screen and (min-width:410px){
    html{font-size:400%;}
}
@media screen and (min-width:432px){ /* Meizu 3 */
    html{font-size:421.875%;}
}
@media screen and (min-width:480px){
    html{font-size:469%;}
}
@media screen and (min-width:540px){
    html{font-size:527.34%;}
}
@media screen and (min-width:640px){
    html{font-size: 625%;}
}

@media screen and (width:720px){
    html{font-size: 703.125%;}
}

media
For media query, you can set different styles for different screen sizes. Especially if you need to set up responsive pages, @ media is very useful. When you reset the browser size, the page will also be re rendered according to the width and height of the browser.   

In the above code, the first @ media screen and (min width: 350px) indicates that when the width of the mobile device is greater than 350px, the page will use the style in curly brackets, that is, the font size of the html root element will be set to 342%. (max width: 350px, this style will be adopted when the equipment width is less than 350px). The above css code is used to set different html font sizes on devices with different resolutions.

Why set it like this? Because this adaptation method uses the rem of css3 for adaptation, and as mentioned earlier, REM is calculated relative to the font size of html. Now the font size of html on different devices has changed, which means that the px pixel values represented by 1rem are different, so as to achieve the effect of adapting the same page on different devices in proportion.

How to determine the font size value of html element? Take the following example:

@media screen and (min-width:375px){
    html{font-size:366.2%;}
}

If the screen width is greater than 375px, it will be adapted according to the width of 375px. At the same time, the design draft usually given to us is 640px wide or 750px wide, and the above calculations are based on the assumption that the design draft is 640px wide, and 750px is also calculated in the same way. Now?

• The screen width is 375, the design width is 640, ratio = 375/640=0.5859375;
• If we want to write down the elements on the design draft in css unit rem, how to convert it? 1rem should be equal to how many PX on the draft. Here we set 1rem = 100px; Can you set other values? Of course, it can be set to 100 here. It's just convenient for us to calculate when writing css. Just move the decimal point to the left by two digits. For example, a wide 46px button on the design is converted to REM, which is directly 0.46rem.
• Now 1rem represents 100px on the design, so it should be equal to the last real pixels on the device. We need to use the ratio of the screen width to the width of the design. 100px in the design represents the real device 100*ratio = 58.59375px.

In other words, 1rem written in css is equal to device 58.59375px. Because 1rem is equal to 1 times the font size of the html element, the font size of the html element here should finally be set to 58.59375px. But why is the percentage used in the above code? Because the default font size of html elements in general browsers is 16px, but when users zoom in or out of the browser font size setting, it will not be 16px. Therefore, it is better to set the font size of html to percentage, that is, 58.59375 / 16 = 366.2109375%, that is, 366.2% in the above example.

The same is true for other screens to calculate the font size value of html.

Why use rem?

Cooperate with media query to realize responsive layout

What is the difference between px, em and rem?

px is a pixel, which is the most basic point for displaying data on the screen. In HTML, the default unit is px; em is a relative size, a percentage size relative to the font size of the parent element, and rem is a font size relative to the root element < HTML >

Usage example

1. First, set a benchmark value in HTML, such as font size: 100px;

2. Divide the pixel value by 100 (the set reference value) to calculate the corresponding rem value

If the width of a div is 600300px, change it to REM, that is, 6rem3rem

3. Calculate the font size value of HTML at this time according to the width of the current screen and the width of the design

The current mobile phone screen width is 375px, the design draft width is 640px, 375 / 640 * 100 - > fontsize = 58.59375

Link:

Three adaptation methods of mobile terminal - Stranger y - blog Park

https://www.jianshu.com/p/43dea9fc2eb1