移動端的自適應，大部分我們用到的是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。推薦第一種方法，簡單。
效果展示：
