安裝 lib-flexible
$npm install lib-flexible --save
lib-fiexble, lib-flexible會(huì)自動(dòng)在html的head中添加一個(gè)meta name="viewport"的標(biāo)簽癌佩，同時(shí)會(huì)自動(dòng)設(shè)置html的font-size為屏幕寬度除以10，也就是1rem等于html根節(jié)點(diǎn)的font-size我碟。假如設(shè)計(jì)稿的寬度是750px，此時(shí)1rem應(yīng)該等于75px怎囚。假如量的某個(gè)元素的寬度是150px桥胞，那么在css里面定義這個(gè)元素的寬度就是 width: 2rem恳守。但是當(dāng)分辨率大于某個(gè)特定值時(shí)贩虾，它便不再生效，
lib-flexible要配合postcss-px2rem-exclude一起使用
安裝 postcss-px2rem-exclude
使用postcss-px2rem-exclude自動(dòng)將css中的px轉(zhuǎn)換成rem
$npm install postcss-px2rem-exclude --save
Vue Cli 2.x 使用方法
找到根目錄中的
.postcssrc.js添加以下代碼缎罢，添加完以后重新 重啟服務(wù)npm run dev就好了，在瀏覽器控制臺(tái)就可以看到之前設(shè)置的font-size自動(dòng)轉(zhuǎn)換成rem了
"postcss-px2rem-exclude": {
remUnit: 75,
exclude: /node_modules|folder_name/i // 忽略node_modules目錄下的文件
}
圖片示例：
image.png
Vue Cli 3.x 使用方法舰始，同樣也是安裝上面兩個(gè)插件
$npm install lib-flexible --save
$npm install postcss-px2rem-exclude --save
在根目錄里面找
vue.config.js,如果沒(méi)有找到創(chuàng)建一個(gè)咽袜，添加以下代碼， 添加完后重新啟動(dòng)npm run serve服務(wù)
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem-exclude')({
// 以設(shè)計(jì)稿750為例询刹， 750 / 10 = 75
remUnit: 75,
"exclude":/node_modules/i //忽略 node_modules 目錄下的所有文件
}),
]
}
}
}
圖片示例：
image.png
Vue Cli 4.x 使用方法萎坷，同樣也是安裝上面兩個(gè)插件
$npm install lib-flexible --save
$npm install postcss-px2rem-exclude --save
在 cli 4.x 中 跟 vue cli3 使用方法一樣
