postcss-px2rem px轉(zhuǎn)rem

utils/rem.js

// 基準(zhǔn)大小
const baseSize = 14;
// 設(shè)置 rem 函數(shù)
function setRem() {
  // 當(dāng)前頁面寬度相對于 1920 寬的縮放比例,可根據(jù)自己需要修改。
  const scale = document.documentElement.clientWidth / 1920;
  // 設(shè)置頁面根節(jié)點(diǎn)字體大小
  document.documentElement.style.fontSize =
    baseSize * Math.min(scale, 2) + "px";
}
// 初始化
setRem();
// 改變窗口大小時(shí)重新設(shè)置 rem
window.onresize = function() {
  setRem();
};

main.js 引入

import "@/utils/rem.js";

postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-pxtorem": {
      rootValue: 14,
      minPixelValue: 12, //px小于12的不會被轉(zhuǎn)換
      propList: ["*"],
      selectorBlackList: ['el-submenu','el-menu','el-table','el-breadcrumb'],  //則是一個(gè)對css選擇器進(jìn)行過濾的數(shù)組,比如你設(shè)置為['fs'],那例如fs-xl類名,里面有關(guān)px的樣式將不被轉(zhuǎn)換,這里也支持正則寫法。
      exclude: /(components|node_modules)/ig, // 不轉(zhuǎn)換的文件
    }
  }
}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容