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

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

1vw = 屏幕的1%

100vw = 屏幕的宽度 = 750px

1px = 0.1333333333vw

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

html{font-size:13.33333333vw}

rem是相对html元素

则html为100px

1rem = 100px

注意:应设置meta为移动端

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

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

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

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

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

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

原文链接：https://blog.noob6.com/2018/06/03/the-simplest-way-to-adapted-to-mobile-in-css-with-vw+rem/

大项目可参考：https://www.w3cplus.com/mobile/vw-layout-in-vue.html