優(yōu)點(diǎn)
1.不需要自己編寫js計(jì)算滚局，引入lib-flexible
2.不需要手動計(jì)算rem值，不需要改變px寫法顽频，postcss-px2rem-exclude 會自動將px計(jì)算成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庫大小出現(xiàn)問題
是因?yàn)樯线吪渲玫膃xclude中的正則有問題藤肢，這樣寫的話是一個字符串，但是json文件中又不能寫正則糯景，所以新建一個文件來寫postcss的相關(guān)配置
這樣才能正常忽略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計(jì)算rem的插件除了postcss-px2rem-exclude也有很多其他類似的
