postcss-pxtorem設(shè)置不轉(zhuǎn)換UI框架的CSS單位問(wèn)題
postcss-pxtorem設(shè)置不轉(zhuǎn)換UI框架的CSS單位
在移動(dòng)端項(xiàng)目中使用postcss-pxtorem做適配，同時(shí)也使用到了第三方UI庫(kù)（vant）。
這時(shí)就出現(xiàn)了一個(gè)問(wèn)題。
第三方UI庫(kù)使用的是px，而postcss將頁(yè)面中的px 全部轉(zhuǎn)化成了rem.導(dǎo)致樣式縮小。
查詢(xún)postcss配置文檔后發(fā)現(xiàn) 其提供了selectorBlackList 屬性來(lái)忽略掉某些選擇器，vant-UI組件庫(kù)的CSS都是以.van開(kāi)頭的 因此我只需要將 .van 忽略掉就好
具體配置如下：
module.exports = {
plugins: {
// 這個(gè)工具可以實(shí)現(xiàn)自動(dòng)添加CSS3前綴
"autoprefixer": {
overrideBrowserslist: ['last 5 version', '>1%', 'ie >=8']
},
//如果你使用rem來(lái)實(shí)現(xiàn)移動(dòng)端多設(shè)備適配，這個(gè)工具可以把px轉(zhuǎn)換為rem
"postcss-pxtorem": {
rootValue: 100, // 指定轉(zhuǎn)換倍率，我現(xiàn)在設(shè)置這個(gè)表示1rem=100px;
minPixelValue: 1, // 需要轉(zhuǎn)換的最小值，一般1px像素不轉(zhuǎn)換，以上才轉(zhuǎn)換
unitPrecision: 6, // 轉(zhuǎn)換成rem單位的小數(shù)點(diǎn)后的保留位數(shù)
selectorBlackList: ['.van'], // 匹配不被轉(zhuǎn)換為rem的選擇器
propList: ['*'], // 屬性列表，表示你要把哪些css屬性的px轉(zhuǎn)換成rem，這個(gè)*表示所有
replace: true, // 替換包含rem的規(guī)則，而不是添加回退
mediaQuery: false // 允許在媒體查詢(xún)中轉(zhuǎn)換px
}
}
}postcss-pxtorem px不轉(zhuǎn)換為rem的做法
有些場(chǎng)景是不要px轉(zhuǎn)為rem的時(shí)候，如果不想設(shè)置vscode的vetur的設(shè)置，當(dāng)然也不建議設(shè)置，除非團(tuán)隊(duì)每個(gè)人都設(shè)置，要不然就會(huì)被保存格式化，PX都會(huì)轉(zhuǎn)為px
所以采用如下做法：
postCssPxToRem({
// 自適應(yīng)，px>rem轉(zhuǎn)換
rootValue: 192, // 根據(jù)設(shè)計(jì)圖尺寸寫(xiě)，設(shè)計(jì)圖是 1920，就寫(xiě) 192
propList: ['*'], // 需要轉(zhuǎn)換的屬性，這里選擇全部都進(jìn)行轉(zhuǎn)換
selectorBlackList: ['-nopx'], // 過(guò)濾掉-nopx結(jié)尾的class，不進(jìn)行rem轉(zhuǎn)換
}),實(shí)際代碼設(shè)置如下：
<div id="lightEchart-nopx"></div>
效果如圖：
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
antd實(shí)現(xiàn)table組件選中單行換樣式(比如背景顏色)
這篇文章主要介紹了antd實(shí)現(xiàn)table組件選中單行換樣式(比如背景顏色),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
在計(jì)算字符數(shù)時(shí),一般情況下,英文字符、數(shù)字和大部分符號(hào)都可以被視為占一個(gè)字符長(zhǎng)度,因?yàn)樗鼈兪菃蝹€(gè)字節(jié),然而,對(duì)于某些特殊字符,如表情符號(hào)和部分非英文字符,會(huì)被認(rèn)為占據(jù)了多個(gè)字符長(zhǎng)度,本文給介紹了vue處理emoji表情占位符的操作方法,需要的朋友可以參考下2024-06-06
圖文詳解Element-UI中自定義修改el-table樣式
elementUI提供的組件間距、樣式都比較大,如果直接套用,在頁(yè)面顯示可能就會(huì)顯得很大,就比如表格,表頭、行寬如果不修改的話(huà),遇到列較多的時(shí)候,會(huì)顯得整個(gè)頁(yè)面就不好看,下面這篇文章主要給大家介紹了關(guān)于Element-UI中自定義修改el-table樣式的相關(guān)資料,需要的朋友可以參考下2022-08-08
vue3 i18n動(dòng)態(tài)獲取key的實(shí)現(xiàn)方式
在Vue3項(xiàng)目中,使用i18n動(dòng)態(tài)獲取keyzh文件時(shí),直接用中括號(hào)無(wú)效,需改用數(shù)組形式如$[key, 'zh'],明確指定語(yǔ)言代碼以正確加載翻譯2025-09-09
Vue中$emit調(diào)用父組件異步方法模擬.then實(shí)現(xiàn)方式
這篇文章主要介紹了Vue中$emit調(diào)用父組件異步方法模擬.then實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-09-09
vue2前端使用axios發(fā)起post請(qǐng)求后端(springboot)接收不到值解決辦法
這篇文章主要介紹了vue2前端使用axios發(fā)起post請(qǐng)求后端(springboot)接收不到值解決辦法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-03-03
vue全局混入之狀態(tài)判斷是否執(zhí)行點(diǎn)擊
這篇文章主要介紹了vue全局混入之狀態(tài)判斷是否執(zhí)行點(diǎn)擊方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue如何優(yōu)雅地復(fù)制一行帶附件的表格數(shù)據(jù)
在做 Vue 項(xiàng)目的時(shí)候,大家是不是經(jīng)常遇到這樣的需求,點(diǎn)一下復(fù)制按鈕,把這行表格數(shù)據(jù)復(fù)制一份放在下方,除了附件字段之外其他都保留,所以本文我們就來(lái)看看如何優(yōu)雅地復(fù)制一行帶附件的數(shù)據(jù),不破壞原始數(shù)據(jù)結(jié)構(gòu)吧2025-09-09
關(guān)于json-bigint處理大數(shù)字問(wèn)題
這篇文章主要介紹了關(guān)于json-bigint處理大數(shù)字問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
在vue中實(shí)現(xiàn)表單驗(yàn)證碼與滑動(dòng)驗(yàn)證功能的代碼詳解
在Web應(yīng)用程序中，表單驗(yàn)證碼和滑動(dòng)驗(yàn)證是常見(jiàn)的安全機(jī)制，用于防止惡意攻擊和機(jī)器人攻擊，本文將介紹如何使用Vue和vue-verify-code庫(kù)來(lái)實(shí)現(xiàn)表單驗(yàn)證碼和滑動(dòng)驗(yàn)證功能,需要的朋友可以參考下2023-06-06