REM是实现响应式布局的方案之一,除了REM之外,还有VM、REM+VM,今天主要来记录一下REM的实操,
一、安装插件
npm install lib-flexible
npm install postcss-plugin-px2rem -D
二、在main.js引入
import 'lib-flexible/flexible.js'
在vue.config.js中配置
css:{
loaderOptions:{
postcss:{
plugins:[
require('postcss-plugin-px2rem)({
rootValue:37.5, //设计稿的宽/10
exclude:/(node_module)/,
minPixeValue:3 //只对3倍图及3倍图以上的才生效
})
]
}
}
}
这样,就可以放心的使用 px 啦