(一) 本節(jié)知識點(diǎn)
在vue項目中使用rem適配
(二) 第一步安裝
利用安裝
npm install amfe-flexible -S
npm install postcss-px2rem -S
postcss-px2rem會將px轉(zhuǎn)換為rem，rem單位用于適配不同寬度的屏幕，根據(jù)<html>標(biāo)簽的font-size值來計算出結(jié)果，1rem=html標(biāo)簽的font-size值
(三) 第二步引入 lib-flexible
在入口main.js中 引入 lib-flexible
import "amfe-flexible/index.js";
這里特別注意的就是
注意事項（important）: 由于flexible會動態(tài)給頁面header中添加<meta name='viewport' >標(biāo)簽，所以務(wù)必請把目錄 public/index.html 中的這個標(biāo)簽刪除?。?！
(四) 配置postcss-px2rem
(1) vuecli3 配置
px2rem的配置放在vue-cli3 項目中vue.config.js中（找不到？可能你是一個新構(gòu)建的項目，需要手動在項目根目錄創(chuàng)建vue.config.js）
具體配置內(nèi)容如下：
postcss-pxtorem 在postcss.config.js中配置
module.exports = {
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require("postcss-px2rem")({
remUnit: 75
})
]
}
}
}
}
(2) 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: 75,
propList: ['*', '!border*']
}
}
}
propList 表示不匹配 要是想匹配邊框之類的 可以在里面用 !border* 表示不配備邊框，這樣不會把邊框1px變成1rem
(五) 使用方法
按照上面的步驟寫完后，使用時設(shè)計圖750px的，那設(shè)計圖要是300px的寬度，那代碼里面寫成300px。這樣就可以了
(六)不想匹配，也就是不想把px變?yōu)閞em,可以這樣
.nav {
width: 400px;
height: 300px;
background: red;
border: 1px solid black; /*no*/
}
