一、移动适配
主流的两种方案
-
flex + rem单位 做适配效果 (比如淘宝和小米移动端) 当前市场最多
-
flex + viewport width /vh单位 做适配效果 (比如 B站移动端 ) 新兴,马上的一个趋势
rem单位
媒体查询
- 相对单位
- rem单位是相对于HTML标签的字号计算结果
- 1rem = 1HTML字号大小
- 所以,我们只需要修改html 的文字大小,就可以完成元素大小的等比例缩放
-
html { font-size: 35px; } 此时 1rem 就是 35像素。
-
媒体查询 mediaquery 可以自动检测视口的宽度。
-
媒体查询一个非常大的作用是:根据屏幕宽度更改html文字大小
-
使用媒体查询, 根据不同的视口宽度, 设置不同的根字号 ÿ