最简单的移动端适配方案（vw/rem）

一行代码解决移动端适配问题，无需任何js代码，开发时，直接用rem代替px进行开发即可

html {
    font-size: 0.1333333vw;
}

原理如下(关于vw和rem的含义，请自行度娘吧，这里不多说)：

1.这个数值怎么来的？假设我们现在设计稿是750px的，那么100vw/750px=    0.1333333vw/px

2.既然是移动端适配，那在html里加上这一行代码也是必不可少的了

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>

3.html的font-size为0.1333333vw，即为1px，自然1rem = 1px（相对750的设计稿），1rem=0.5px(相对于375的实际页面)，(vw变小了一半，所以1rem也就小了一半)，这个和小程序里的rpx类似

注意：以上方案还有一个弊端，那就是当屏幕过大时，就不太适合了，也就是说，以上方法只能适用于手机，像iPad就不太适合，vw会随着随着设备的宽度越来越大，那么用rem做单位的元素也会越来越大，以至于如果这个在pc上，效果会很差。此时，我们可以设置一下当屏幕过大的时候的情况,我们可以加一句代码来解决此问题：

@media (min-width: 560px) {
   html {
      font-size: 54px;
   }
}

---

不对的地方，欢迎下方评论指出