1.安装rem布局插件amfe-flexible、postcss-px2rem-exclude
npm i amfe-flexible postcss-px2rem-exclude --save
2.在main.js文件中引入
import 'amfe-flexible'
3.新建postcss.config.js
按照我们的设计图尺寸配置postcss.config.js内容
这是按设计图是750尺寸配置的
module.exports = {
plugins: {
autoprefixer: {},
"postcss-px2rem-exclude": {
"remUnit": 75,
"exclude": /node_modules/i
}
}
}
remUnit属性是为了设置字体大小比例,最终转换比例 = 设备尺寸/remUnit
exclude 属性是为了过滤第三方 ui 组件,对他们的样式不进行 rem 转换。
4.检验成果