移动端 设置 1rem = 100px

移动端的自适应，大部分我们用到的是rem,现在记录一下，首先要了解 rem  的本质是什么，本质是根据根元素（html、body的字体大小进行自适应，说白了，就是1rem = 根元素的字体大小）

 

目前有好几种  rem  适配方案，可以直接用   postcss-pxtorem（进行rem与px 的转换） 配合   lib-flexible  （设置根元素字体的小）

问题描述： 想要的效果是，   大部分的设计稿是 宽 750px  的设计稿   想要设计成   1rem = 100px  设计稿量多少就写多少px 或者用直接写rem 时，直接除以100倍 如 7.5rem 

解决方案：

（1） 下载 postcss-pxtorem 插件，在package.json 中加入：

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 100, 
        "selectorBlackList":[".van"], //一个对css选择器进行过滤的数组 ，如 vant ui组件库 不然会倍自动缩放
        "propList":["*"]
       }
    }
  }

　　然后写入一个 rem.js 文件，进行动态设置根元素的字体 ，并在 main.js 中引入（  import './rem'  ）

function resizeFontsize(){
    var width = document.documentElement.clientWidth;
    document.documentElement.style.fontSize = width/7.5+'px'; 
    //width/(效果图片宽度/文本字体大小(100))
}
resizeFontsize();
//改变横屏竖屏执行效果更换
window.addEventListener('orientationchange',resizeFontsize);
//改变手机大小执行效果更换
window.addEventListener('resize',resizeFontsize);

（2）另一种方法是，配合 lib-flexible 使用，直接在 node_modules => lib-flexible => flexible.js 中修改，如图：

         

 

 配置完之后，还有一个问题，就是当我们设置字体大小的时候，在750px 的设计稿中，量的字体假设是20px。放在375px 的屏幕上，会自动转成0.2rem，而375px 的根元素的字体大小是 50px  所以那就是0.2*

50 为实际是 10px ，所以，解决方法有两个,一个是，将字体设置的写为 20PX 大写 这样，他就不会进行缩放，另一种是写成40px。推荐第一种方法，简单。 

效果展示：