移动端vw适配方案

一、vw是什么

vw就是视口的宽度，vw 是个相对单位。
不管在什么屏幕下，我们的屏幕宽都是 100vw

二、如何根据vw布局

• 假设设计稿宽度是750px
• 那么有等式一：750px = 100vw
• 那么有等式二：1px = 100vw/750

• 假设我们想实现 1rem = 100px（方便计算，也可以是其他比例）
• 也就是需要设置html的font-size为100px
• 根据等式二，得出1rem = 100px = 100*(100vw/750) = 13.33333vw

最后给html的根元素设置字体大小值就为13.33333vw

注意

• 这里的 1rem = 100px，好处是：
• 只需要根据设计稿给的px直接缩小100倍，改单位为rem即可

三、详细代码

• 设置根元素的字体大小为13.33333vw
• 当我们的设备屏幕大于750的时候：
  要设置body居中且最大宽度为750px
  还要设置html的的字体大小不能大于100px（宽度不能超过设计稿最大宽度）

html {
  font-size: 13.33333vw;
}
body {
  max-width: 750px;
  margin: 0 auto;
}
/* 当设备宽度大于750的时候，根元素字体大小最大为100px */
@media screen and (min-width: 750px) {
  html {
    font-size: 100px;
  }
}

四、如何使用（px到rem的转换）

如果设计稿给我们一个盒子宽是 350px 高是 400px，那么我们只要在数值的基础上缩小 100倍即可，宽是 3.5rem高是 4rem