1.下載lib-flexible
使用的是vue-cli+webpack，通過npm來安裝的
npm i lib-flexible --save
2.引入lib-flexible
在main.js中引入lib-flexible
import 'lib-flexible/flexible'
3.設(shè)置meta標(biāo)簽
通過meta標(biāo)簽，設(shè)置設(shè)備寬度以及縮放比例
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
4.安裝postcss-pxtorem
一款 postcss 插件顽照，用于將單位轉(zhuǎn)化為 rem
npm install postcss-pxtorem -D
5.配置postcss-pxtorem
在安裝postcss-pxtorem的時(shí)候會(huì)生成一個(gè)文件.postcssrc.js
在根目錄找到.postcssrc.js文件，可以在此配置的基礎(chǔ)上根據(jù)項(xiàng)目需求進(jìn)行修改闽寡，如：
module.exports = {
plugins: {
//...
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 37.5, //vant-UI的官方根字體大小是37.5
propList: ['*']
}
}
}
注意：在配置 postcss-loader 時(shí)代兵，應(yīng)避免 ignore node_modules 目錄，這會(huì)導(dǎo)致 Vant 的樣式無法被編譯
溫馨提示： rootValue這個(gè)配置項(xiàng)的數(shù)值是多少呢爷狈？植影？？ 通常我們是根據(jù)設(shè)計(jì)圖來定這個(gè)值涎永，原因很簡(jiǎn)單思币，便于開發(fā)鹿响。假如設(shè)計(jì)圖給的寬度是750，我們通常就會(huì)把rootValue設(shè)置為75谷饿，這樣我們寫樣式時(shí)抢野，可以直接按照設(shè)計(jì)圖標(biāo)注的寬高來1:1還原開發(fā)。（iPhone界面尺寸：320 * 480各墨、640 * 960指孤、640 * 1136、750 * 1334贬堵、1080 * 1920等恃轩。）
那為什么你在這里寫成了37.5呢？黎做？叉跛？
之所以設(shè)為37.5，是為了引用像vant蒸殿、mint-ui這樣的第三方UI框架筷厘，因?yàn)榈谌娇蚣軟]有兼容rem，用的是px單位宏所，將rootValue的值設(shè)置為設(shè)計(jì)圖寬度（這里為750px）75的一半酥艳，即可以1:1還原vant、mint-ui的組件爬骤，否則會(huì)樣式會(huì)有變化充石，例如按鈕會(huì)變小。
既然設(shè)置成了37.5 那么我們必須在寫樣式時(shí)霞玄，也將值改為設(shè)計(jì)圖的一半骤铃。
6.當(dāng)配置完之后，只需要重啟下服務(wù)坷剧，就自動(dòng)轉(zhuǎn)化為rem了
npm run dev
拓展
px轉(zhuǎn)rem不僅可以用postcss-pxtorem惰爬，同時(shí)還有px2rem-loader，只是配置不一樣惫企，詳見下方鏈接
vue：將px轉(zhuǎn)化為rem撕瞧，適配移動(dòng)端vant-UI等框架（px2rem-loader）
