3.使用PostCSS自動(dòng)將px轉(zhuǎn)換成rem
https://www.npmjs.com/package/postcss-pxtorem
3.1安裝postcss-pxtorem
npm install postcss-pxtorem -D
3.2在配置文件中配置postcss-pxtorem
"postcss-pxtorem": {
rootValue: 100, // 根元素字體大小
// propList: ['*'] // 可以從px更改到rem的屬性
propList: ["height"]
}
rootValue (Number) root 元素的字體大小。
unitPrecision (Number) 允許REM單位增長到的十進(jìn)制數(shù)。
propList ( array ) 可以從px更改到rem的屬性。
值需要精確匹配。
使用通配符 * 啟用所有屬性。 示例:['']
在單詞的開頭或者結(jié)尾使用 。 ( ['position'] 將匹配 background-position-y )
使用 與屬性不匹配。! 示例:['','letter-spacing']!
將"非"前綴與其他前綴合并。 示例:['','font*']!
selectorBlackList ( array ) 要忽略和離開的選擇器。
如果值為字符串,它將檢查選擇器是否包含字符串。
['body'] 將匹配 .body-class
如果值為 regexp,它將檢查選擇器是否匹配正則表達(dá)式。
[/^body$/] 將匹配 body,但不匹配 .body
replace (Boolean) 替代包含rems的規(guī)則,而不是添加回退。
mediaQuery (Boolean) 允許在媒體查詢中轉(zhuǎn)換 px。
minPixelValue (Number) 設(shè)置要替換的最小像素值。
突然感覺淡淡不憂傷了, 過去麻煩的事webpack都幫我們做完了