vue-cli 3.0+vant項(xiàng)目使用postcss-pxtorem和amfe-flexible 進(jìn)行移動(dòng)端適配
Rem 適配
Vant 中的樣式默認(rèn)使用px作為單位，如果需要使用rem單位，推薦使用以下兩個(gè)工具
- postcss-pxtorem?是一款postcss插件碍舍，用于將單位轉(zhuǎn)化為rem
- lib-flexible? 用于設(shè)置rem基準(zhǔn)值
lib-flexible已經(jīng)廢棄會(huì)出現(xiàn)很多問題，用amfe-flexible進(jìn)行替代
[TOC]
步驟
1. 安裝postcss-pxtorem
$ npm install postcss-pxtorem --save-dev
2. 安裝amf-flexible
$ npm i -S amfe-flexible
3.在main.js中引入amfe-flexible
$ import 'amfe-flexible'
4. 在vue.config.js中進(jìn)行配置
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({ // 把px單位換算成rem單位
rootValue: 37.5, // vant官方使用的是37.5
selectorBlackList: ['vant', 'mu'], // 忽略轉(zhuǎn)換正則匹配項(xiàng)
propList: ['*']
})
]
}
}
},
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 為生產(chǎn)環(huán)境修改配置...
} else {
// 為開發(fā)環(huán)境修改配置...
}
}
}
注意
注意將藍(lán)湖上的設(shè)計(jì)稿妈经，寬度設(shè)置為375px,這樣設(shè)計(jì)稿是100px捧书，程序上直接寫100px就可以了
