- 使用lib-flexible 设置 rem 基准值(html标签字体大小)
安装依赖:npm i amfe-flexible
main.js 引入:import ‘amfe-flexible’
- postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem
安装依赖: npm install postcss-pxtorem -D
在项目根目录中创建 postcss.config.js文件,如下:
//postcss配置文件。代码参照vant官网
module.exports = {
plugins: {
// 自动添加浏览器厂商声明前缀,用来兼容不同都浏览器
// vueCli 已经在内部配置了 autoprefixer &写在这里也对,
// 但是,写在这里控制台编译会出现警告
// 原因是:vueCli是通过项目中 .browserslistrc 文件来配置要兼容环境信息。
// 所以写在这里是冲突的,还是注释掉吧
// autoprefixer: {
// browsers: ['Android >= 4.0', 'iOS >= 8'],
// },
//把px转为rem
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*'],
},
},
};
配置完毕后,重新启动服务;
刷新页面,可以通过检查控制台 看px是否转为rem;
测试发现,在style标签内设置px,检查控制台时就会自动转换为rem;但是不支持行内样式,也就是说行内写px不会被转成rem。
// 冲突问题:将上边的代码写在 .browserslistrc 文件中就可以了,如下:
Android >= 4.0
iOS >= 8