PostCSS自動(dòng)將px轉(zhuǎn)換成rem

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都幫我們做完了

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容