优点
1.不需要自己编写js计算，引入lib-flexible
2.不需要手动计算rem值，不需要改变px写法，postcss-px2rem-exclude 会自动将px计算成rem
1.下载 lib-flexible + postcss-px2rem-exclude
npm install lib-flexible --save-dev
npm install postcss-px2rem-exclude --save-dev
2.在main.js引入 lib-flexible
// main.js
import 'lib-flexible'
3.package.json配置postcss-px2rem-exclude (如果没有引用第三方ui库的话没问题)
// package.json
{
"name": "demo",
"version": "1.0.4",
"private": true,
"scripts": {
"dev": "vue-cli-service serve --mode dev",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --mode build",
"pre": "vue-cli-service build --mode pre",
"test": "vue-cli-service build --mode test"
},
...
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-px2rem-exclude": {
"remUnit": 75, // 如果UI是750px的话
"exclude": "/node_modules|floder_name/i" // --->此处有问题
}
}
}
}
4.引入vant等UI库大小出现问题
是因为上边配置的exclude中的正则有问题，这样写的话是一个字符串，但是json文件中又不能写正则，所以新建一个文件来写postcss的相关配置
这样才能正常忽略node_modules中的css文件
在根目录新建postcss.config.js
// postcss.config.js
module.exports = {
"plugins": {
"autoprefixer": {},
"postcss-px2rem-exclude": {
"remUnit": 75,
"exclude": /node_modules|floder_name/i
}
}
}
移动端适配 还有其他很多方案，rem+vm 纯 css
js计算rem的插件除了postcss-px2rem-exclude也有很多其他类似的
