postcss-pxtorem配合lib-flexible，非常方便，vue-cli3.0后，項(xiàng)目配置被大大精簡(jiǎn)了。
安裝 flexible和 postcss-px2rem（命令行安裝）
npm install lib-flexible --save
npm install postcss-pxtorem --save-dev
或者：
npm install postcss-px2rem --save-dev
postcss-pxtorem會(huì)將px轉(zhuǎn)換為rem艺配，rem單位用于適配不同寬度的屏幕，根據(jù)<html>標(biāo)簽的font-size值來(lái)計(jì)算出結(jié)果惋砂，1rem=html標(biāo)簽的font-size值妒挎。
引入lib-flexible
在項(xiàng)目入口文件main.js 中引入lib-flexible
import 'lib-flexible'
配置postcss-pxtorem
1.vue.config.js中配置
放在vue-cli3 項(xiàng)目中vue.config.js中（vue-cli3默認(rèn)情況下沒(méi)有vue.config.js，需要手動(dòng)在項(xiàng)目根目錄創(chuàng)建）
//////////////////待補(bǔ)充
2.postcss-pxtorem 在postcss.config.js中配置
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 75,//
propList: ['*']// 設(shè)置哪些屬性可以從px變?yōu)閞em西饵≡脱冢“！”表示不匹配眷柔，“ !font* ”表示不匹配字體相關(guān)屬性
}
}
}
或者postcss-px2rem
module.exports = {
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
remUnit: 75
})
]
}
}
}
}
配置完成后期虾，重啟一下項(xiàng)目。
使用
下面來(lái)看我們的代碼驯嘱，代碼中我們直接用px來(lái)寫(xiě)寬高：
再來(lái)看下html根字體的大小
rootValue：通常我們是根據(jù)設(shè)計(jì)圖來(lái)定這個(gè)值镶苞，原因很簡(jiǎn)單，便于開(kāi)發(fā)鞠评。假如設(shè)計(jì)圖給的寬度是750茂蚓，我們通常就會(huì)把rootValue設(shè)置為75，這樣我們寫(xiě)樣式時(shí)剃幌，可以直接按照設(shè)計(jì)圖標(biāo)注的寬高來(lái)1:1還原開(kāi)發(fā)聋涨。
即：如果你設(shè)計(jì)稿的長(zhǎng)度是750基數(shù)的可以將rootValue的值修改為75
