1.安装依赖
npm install amfe-flexible -S
npm install postcss-px2rem -S
2.引入lib-flexible
// 在入口main.js中 引入 lib-flexible
import "amfe-flexible/index.js";
注意事项(important): 由于flexible会动态给页面header中添加标签,所以务必请把目录 public/index.html 中的这个标签删除!!!
3.配置post-px2rem
vuecli3 配置
postcss-pxtorem 在postcss.config.js中配置
module.exports = {
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require("postcss-px2rem")({
remUnit: 75
})
]
}
}
}
}
vuecli2 配置
找到根目录下.postcssrc.js文件
module.exports = {
plugins: {
'postcss-import': {},
'postcss-url': {},
// to edit target browsers: use "browserslist" field in package.json
autoprefixer: {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
// rootValue: 422.4,//对应设计图宽度4224*1296
// rootValue: 192,//对应设计图宽度1920*1080
rootValue: 75,
propList: ['*', '!border*'] // 表示不匹配 要是想匹配边框之类的 可以在里面用 !border* 表示不配备边框,这样不会把边框1px变成1rem
}
}
}
4.使用方法
按照上面的步骤写完后,使用时设计图750px的,那设计图要是300px的宽度,那代码里面写成300px。这样就可以了
5.不匹配(不想将px变为rem)
.nav {
width: 400px;
height: 300px;
background: red;
border: 1px solid black; /*no*/
}