安装 lib-flexible
$npm install lib-flexible --save
lib-fiexble, lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem。但是当分辨率大于某个特定值时，它便不再生效，
lib-flexible要配合postcss-px2rem-exclude一起使用
安装 postcss-px2rem-exclude
使用postcss-px2rem-exclude自动将css中的px转换成rem
$npm install postcss-px2rem-exclude --save
Vue Cli 2.x 使用方法
找到根目录中的
.postcssrc.js添加以下代码，添加完以后重新 重启服务npm run dev就好了，在浏览器控制台就可以看到之前设置的font-size自动转换成rem了
"postcss-px2rem-exclude": {
remUnit: 75,
exclude: /node_modules|folder_name/i // 忽略node_modules目录下的文件
}
图片示例：
image.png
Vue Cli 3.x 使用方法，同样也是安装上面两个插件
$npm install lib-flexible --save
$npm install postcss-px2rem-exclude --save
在根目录里面找
vue.config.js,如果没有找到创建一个，添加以下代码， 添加完后重新启动npm run serve服务
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem-exclude')({
// 以设计稿750为例， 750 / 10 = 75
remUnit: 75,
"exclude":/node_modules/i //忽略 node_modules 目录下的所有文件
}),
]
}
}
}
图片示例：
image.png
Vue Cli 4.x 使用方法，同样也是安装上面两个插件
$npm install lib-flexible --save
$npm install postcss-px2rem-exclude --save
在 cli 4.x 中 跟 vue cli3 使用方法一样
