H5在移动端适配px自动转rem

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,待作者更新了库再升级到最新,暂时先安装指定版本

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值