移动端适配-px自动转rem
Posted 王李
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端适配-px自动转rem相关的知识,希望对你有一定的参考价值。
步骤:
1.装包: npm install postcss-pxtorem --save-dev
2.项目根目录新建vue.config.js
const autoprefixer = require(\'autoprefixer\')
const pxtorem = require(\'postcss-pxtorem\')
module.exports = {
// 样式相关
css: {
// 加载选项
loaderOptions: {
postcss: {
plugins: [
// 设置项目样式兼容
autoprefixer(),
// px转rem的规则
pxtorem({
// 1rem 设计图中是 1rem是37.5px
// 设计图宽度为37.5*10 = 375
rootValue: 37.5,
propList: [\'*\']
})
]
}
}
}
}
- vant-rem适配示例代码:https://github.com/youzan/vant-demo/tree/master/vant/rem
以上是关于移动端适配-px自动转rem的主要内容,如果未能解决你的问题,请参考以下文章