1, 配置
安装1
npm i lib-flexible --save
安装2
npm i postcss-px2rem --save
postcss-px2rem会将px转换为rem,rem单位用于适配不同宽度的屏幕,根据标签的font-size值来计算出结果,1rem=html标签的font-size值。
2, 引入lib-flexible
在项目入口文件main.js 中引入lib-flexible
import 'lib-flexible'
注意事项(important): 由于flexible会动态给页面header中添加标签,所以务必请把目录 public/index.html 中的这个标签删除!!!
3, 配置postcss-px2rem
配置放在vue-cli3 项目中vue.config.js中
// css相关配置
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
remUnit: 75
})
]
}
}
},
亲测有效。