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