技術標籤：vuevuejs

1、下載安裝依賴：
npm install postcss-pxtorem -save

2、新建一個rem.js的檔案，在main.js中引用。

(function() {
  const baseSize = 16; // 32
  function setRem() {
    const scale = document.documentElement.clientWidth / 375; // 750
    document.documentElement.style.fontSize =
      baseSize * Math.min(scale, 2) + "px";
  }

  window.onresize = function() {
    setRem();
  };
})();
 

注：以設計稿自定義為375px 測量值直接寫入即可，如是750px，則乘以2

3、在根目錄下新建一個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的不會被轉換
    },
  },
};