最近在做移动端的项目时,想让px自动转换为rem布局,做到屏幕自适应。在安装postcss-pxtorem时
npm install postcss-pxtorem -S
然后运行npm run dev 就会报错
[object Object] is not a PostCSS plugin
查询资料说安装的postcss-pxtorem 版本太高目前是6.xx版本
然后
npm install postcss-pxtorem @5.1.1 -S
再次运行 npm run dev 后,完美解决了。
我设置的postcssrc.js
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {},
"postcss-pxtorem": {
rootValue: 37.5, //vant-UI的官方根字体大小是37.5
propList: ['*']
}
}
}
设置的元素的width 200px,height 200px
200/37.5 = 5.33333rem