1.使用lib-flexible动态设置REM基准值(html标签的字体大小)
npm i amfe-flexible
然后在main.js引入它
// rem适配
import 'amfe-flexible'
2.使用postcss-pxtorem将px转为rem
// 指定版本安装,安装最新版本会有报错几率
npm i postcss-pxtorem@5.0.0 -D
然后在根目录下创建一个postcss.config.js文件
// postcss.config.js
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5,
// 所有属性都会转化
propList: ['*'],
},
},
};
重启服务,刷新页面就可看见效果