此方案是借助兩個(gè)插件恨憎，將px進(jìn)行轉(zhuǎn)化為rem春瞬。
- lib-flexible 用于設(shè)置 rem 基準(zhǔn)值怔鳖。由淘寶手機(jī)前端開發(fā)團(tuán)隊(duì)編寫的竿刁。
- postcss-pxtorem 是一款 postcss 插件景图，用于將單位轉(zhuǎn)化為 rem瓶堕。
一、lib-flexible
Install
npm i -S amfe-flexible
Import
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script src="./node_modules/amfe-flexible/index.js"></script>
//或者
import 'amfe-flexible'; //引入rem自適應(yīng)
二症歇、postcss-pxtorem
Install
npm install postcss-pxtorem --save-dev
Import
在vue-cli2下郎笆，根目錄中的 .postcss.js (沒有，就新建一個(gè))
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {},
"postcss-pxtorem": { // 此處為添加部分
rootValue: 37.5, // 對(duì)應(yīng)16px 適配移動(dòng)端750px寬度
unitPrecision: 5,
propList: ['*'],
selectorBlackList: [],
replace: true,
mediaQuery: false,
minPixelValue: 0
}
}
}
在vue-cli3下,根目錄中的 vue.config.js (沒有忘晤，就新建一個(gè))
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({ // 把px單位換算成rem單位
rootValue: 37.5, // 換算的基數(shù)(設(shè)計(jì)圖750的根字體為32)
selectorBlackList: ['weui', 'mu'], // 忽略轉(zhuǎn)換正則匹配項(xiàng)
propList: ['*']
})
]
}
}
}
}
