移动端 -- 最简单的移动端适配方案(rem+vw)

1、vw的计算

设计稿(前提设计稿是750px的)

1vw = 屏幕的1%        100vw = 屏幕的宽度 = 750px        1px = 0.1333333333vw

为了方便计算，放大100倍。则100px = 13.33333333vw

html {
    font-size: 13.33333333vw;
}

2、rem的计算 

rem是相对html元素，根据上面定义的结果：html 的 font-size为100px，即1rem = 100px

注意：应设置meta为移动端

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

那么10px就是0.1rem，1px就是0.01rem

优点：

不需要用 postcss-px-to-viewport这种工具转成一堆小数位特长的rem单位了。而且这个很方便，直接写rem，并不需要转换。

用了转换工具，如果想写px的地方还得设置白名单或者黑名单，这个就不存在这种问题了， 想用相对的就rem，想绝对的就直接写px即可，并不需要其他的各种设置。

设置一下当屏幕过大的时候的情况：

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

加上这句代码，在pc上效果也很不错了~