We adapt to mobile phones, do not do media queries, and use rem values for all styles. The designer draws according to iphone6 plus, the width of iphone6 plus is 414px, sets the font of the root element to 414 / 4.14 = 100px, that is, 1rem = 100px, and then sets the size of all elements to (design size / 100) rem, that's it Scaled proportionally on different phones.
Media queries are best for pages with responsive design! Media queries are best for pages with responsive design! Media queries are best for pages with responsive design! Say important things three times. For example, I don’t use too many media queries here. Media inquiries are a job for me:
Determine whether it is PC or mobile version
If you add a viewport to your page, 1px on the mobile side is equivalent to 1px on the PC side; in other words, an 18px word will look the same on the mobile side and the PC side. Because of this, I gave up the rem unit in the mobile layout and directly used px layout. And because most mobile terminals are adaptive, adaptive websites look very ugly on the PC, so some style changes must be made, and media queries are used at this time. I usually check whether the device width is greater than 768px, which happens to be the resolution of the iPad. If it exceeds it, it will be the PC side, otherwise it will be the mobile side.
What are the benefits of rem layout?
As mentioned above, after adding viewport, the size of 18px characters will be similar at each resolution. You can completely use px for layout on the mobile terminal, so why do you need rem? In my experience, rem is suitable for pages that want to keep the page proportions consistent across device resolutions. There is a rem.js file in our project, which specifically calculates the resolution of the device, and then sets 1rem to one-tenth of the resolution width. Suppose the width of the design draft is 2048px, There is a 100px square in the design draft, then a very simple calculation method comes out $$ {css.height / ps.height}= {screen.height / 2048px} $$ $$ 1rem={screen.height / 10} $$ get $$ css.height={ ps.height / 204.8px }$$ css.height unit is rem When all styles use rem unit, regardless of the resolution, the page proportions will not be messed up. Generally speaking, this calculation is done by taking two significant figures after the decimal point, and it is basically very accurate. .
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
We adapt to mobile phones, do not do media queries, and use rem values for all styles. The designer draws according to iphone6 plus, the width of iphone6 plus is 414px, sets the font of the root element to 414 / 4.14 = 100px, that is, 1rem = 100px, and then sets the size of all elements to (design size / 100) rem, that's it Scaled proportionally on different phones.
Media queries are best for pages with responsive design!
Media queries are best for pages with responsive design!
Media queries are best for pages with responsive design!
Say important things three times.
For example, I don’t use too many media queries here. Media inquiries are a job for me:
Determine whether it is PC or mobile version
If you add a viewport to your page, 1px on the mobile side is equivalent to 1px on the PC side; in other words, an 18px word will look the same on the mobile side and the PC side. Because of this, I gave up the rem unit in the mobile layout and directly used px layout.
And because most mobile terminals are adaptive, adaptive websites look very ugly on the PC, so some style changes must be made, and media queries are used at this time. I usually check whether the device width is greater than 768px, which happens to be the resolution of the iPad. If it exceeds it, it will be the PC side, otherwise it will be the mobile side.
What are the benefits of rem layout?
As mentioned above, after adding viewport, the size of 18px characters will be similar at each resolution. You can completely use px for layout on the mobile terminal, so why do you need rem?
In my experience, rem is suitable for pages that want to keep the page proportions consistent across device resolutions.
There is a rem.js file in our project, which specifically calculates the resolution of the device, and then sets 1rem to one-tenth of the resolution width.
Suppose the width of the design draft is 2048px,
There is a 100px square in the design draft, then a very simple calculation method comes out
$$ {css.height / ps.height}= {screen.height / 2048px} $$
$$ 1rem={screen.height / 10} $$
get
$$ css.height={ ps.height / 204.8px }$$
css.height unit is rem
When all styles use rem unit, regardless of the resolution, the page proportions will not be messed up. Generally speaking, this calculation is done by taking two significant figures after the decimal point, and it is basically very accurate. .