1, 安装:npm i postcss-px2rem --save -dev
2.根目录下新建postcss.config.js (注:之前使用的.postcss.js已经抛弃)
module.exports = {
plugin:{
'postcss-pxtorem':{
rootValue:37.5, //Vant官方根字体大小是37.5
propList:['*'],
selectorBlackList:['.norem'],
exclude:/node_modules/
}
}
}
remUnit:37.5代表1rem=37.5px;所以当你一个75px值时,它会自动转成(75px/37.5)rem
转化完之后,你还需要在根元素设置它的font-size,因为rem是相对于根元素来设置大小的
html{
font-size:10vw;
}
这样的话我们设置的px值就变成相对应的10%的屏幕宽度 *(75px/75)rem,当然也可以根据屏幕宽度动态配置html的font-size
3. 如果你的项目使用vue-cli构建,你也可以直接在vue.config.js配置
module.exports= {
css:{
loaderOptions:{
postcss:{
plugin:[
require('postcss-px2rem')({
rootValue:75,
propList:['*'],
seletorBlackList:['.norem'],
exclude:/node_modules/
})
]
}
}
}
}
在quasar中的写法为:
module.exports=function () {
css:{
loaderOptions:{
postcss:{
plugin:[
require('postcss-px2rem')({
rootValue:75,
propList:['*'],
seletorBlackList:['.norem'],
exclude:/node_modules/
})
]
}
}
}
}
4.老版本项目,没有vue.config.js的情况,找到根目录下的vue-loader.conf.js
配置完成,重启项目即可
附:可能碰见的问题
PostCSS plugin postcss-pxtorem requires PostCSS 8. Migration guide for end-users
postcss-pxtorem版本为8.0,但实际现有最高版本不是8.0,所以推荐先使用固定板@5.1.1,待作者更新了库再升级到最新,暂时先安装指定版本