pxtorem網頁自適應方案

-

之前為了些自適應網頁，會在項目里寫rem。如果設置的rem不恰當，每次還要經過一番計算來得出像素轉換成rem的值；有些麻煩；

pxtorem解決了這樣的問題

我們可以根據設計圖大小設置好根節點的字體大小，也就是1rem=多少像素；

pxtorem幫助我們自動將px轉換成rem；

在代碼中就可以直接寫px，不用寫rem了；

github地址：https://github.com/cuth/postcss-pxtorem

安裝：

npm install postcss-pxtorem -D

根據設計圖大小設置根節點文字大小：

rem.js

// 設置 rem 函數
function setRem () {
  // 320 默認大小16px; 320px = 20rem ;每個元素px基礎上/16
  let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
  //得到html的Dom元素
  let htmlDom = document.getElementsByTagName('html')[0];
  //設置根元素字體大小
  htmlDom.style.fontSize= htmlWidth/(1920/16) + 'px';
}
setRem();
// 改變窗口大小時重新設置 rem
window.addEventListener('resize', function () {
  setRem()
})

在項目根目錄寫配置文件postcss.config.js

module.exports = {
  plugins: {
    // 兼容瀏覽器，添加前綴
    autoprefixer: {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8",
        "last 10 versions", // 所有主流瀏覽器最近10版本用
      ],
      grid: true,
    },
    "postcss-pxtorem": {
      rootValue: 16, //結果為：設計稿元素尺寸/16，比如元素寬320px,最終頁面會換算成 20rem
      propList: ["*"], //是一個存儲哪些將被轉換的屬性列表，這里設置為['*']全部，假設需要僅對邊框進行設置，可以寫['*', '!border*']
      unitPrecision: 5, //保留rem小數點多少位
      //selectorBlackList: ['.radius'],  //則是一個對css選擇器進行過濾的數組，比如你設置為['fs']，那例如fs-xl類名，里面有關px的樣式將不被轉換，這里也支持正則寫法。
      // replace: true, 
      mediaQuery: false, //媒體查詢( @media screen 之類的)中不生效
      minPixelValue: 12, //px小於12的不會被轉換
    },
  },
};

具體參數參考github文檔

-