移动Web(移动适配)

一、移动适配

主流的两种方案

• flex + rem单位 做适配效果 （比如淘宝和小米移动端） 当前市场最多

• flex + viewport width /vh单位 做适配效果 （比如 B站移动端 ） 新兴，马上的一个趋势

  rem单位

  媒体查询

  

  • 相对单位
  • rem单位是相对于HTML标签的字号计算结果
  • 1rem = 1HTML字号大小
  • 所以，我们只需要修改html 的文字大小，就可以完成元素大小的等比例缩放

  • html {
        font-size: 35px;
    }
    此时  1rem 就是 35像素。

  • 媒体查询 mediaquery 可以自动检测视口的宽度。

  • 媒体查询一个非常大的作用是：根据屏幕宽度更改html文字大小

  • 使用媒体查询, 根据不同的视口宽度, 设置不同的根字号 ，就完成了适配