移动端的自适应，大部分我们用到的是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。推荐第一种方法，简单。
效果展示：
