本文共 1012 字,大约阅读时间需要 3 分钟。
1.安装:
npm i postcss-px2rem lib-flexible --save-dev或者yarn add postcss-px2rem lib-flexible
2.在plublic中index.html删除meta标签:
flexible会根据屏幕页面自动添加 标签,动态控制initial-scale,maximun-scale,minimun-scale等属性的值
3.在src中main.js引入:
//导入rem 的 js,动态的设置了不同屏幕的html根元素的 font-sizeimport "lib-flexible"
4.配置vue.config.js:
module.exports=function(){ devServer:{ port:3000, open:true }, //rem配置 css: { loaderOptions: { css:{}, postcss: { plugins: [ require('postcss-px2rem')({//这里是配置项,详见官方文档 remUint:37.5, propList: ['*'], //设置px转换成rem的属性值,*表示所有属性的px转换为rem }), ] } } }}
如果没有配置vue.config.js,可以在build/vue-loader.config.js配置:
const precss = require('precss')const pxtorem = require('postcss-px2rem')module.exports = { ...... postcss:[ precss(), pxtorem({ remUnit: 37.5, //设计尺寸 propList: ['*']//自动转化rem }) ],}
配置完成后页面中使用px会自动转化成rem
转载地址:http://njesi.baihongyu.com/