Vue postcss-pxtorem 將px轉成rem

要將開發是編寫的px轉化成rem需要三步：

方法一：使用lib-flexible插件

1、安裝依賴：lib-flexible、postcss-pxtorem

　　yarn add postcss-pxtorem --save

　　yarn add lib-flexible

2、在main.js引用lib-flexible，import ‘lib-flexible’

4、配置vue.config.js

// css配置
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          // 兼容瀏覽器，添加前綴
          require("autoprefixer")({
            overrideBrowserslist: [
              "Android 4.1",
              "iOS 7.1",
              "Chrome > 31",
              "ff > 31",
              "ie >= 8"
              //'last 10 versions', // 所有主流瀏覽器最近10版本用
            ],
            grid: true
          }),
          require("postcss-pxtorem")({
            "rootValue": 37.5,  //換算基數，可以修改,根據自己需要配置合適值
            "exclude": /(node_module|other)/, //默認false，可以（reg）利用正則表達式排除某些文件夾的方法，例如/(node_module)/ 。如果想把前端UI框架內的px也轉換成rem，請把此屬性設為默認值
            "propList": ["*"],
            "mediaQuery": false, //（布爾值）允許在媒體查詢中轉換px。
            "minPixelValue": 3 //設置要替換的最小像素值(3px會被轉rem)。 默認 0        
            })
        ]
      }
    }    

最后，記得重新啟動npm run serve

方法二：自定義rem.js 文件

1、依舊要安裝： postcss-pxtorem

　　yarn add postcss-pxtorem --save

2、在utils中新建rem.js文件

const baseSize = 32;

// 設置rem 函數
function setRem() {
  // 設計稿通常是二倍圖 750，每份font-size: 32, 開發視圖375，每份font-size: 16
  const scale = document.documentElement.clientWidth / 750;
  // 給根元素設置font-size
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px';
}

// 初始化
setRem();

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

3、在main.js中引入：import  '@/utils/rem.js'

4、配置vue.config.js，如同方法一樣，只需要改變 rootValue: 16 即可；

最后，記得重新啟動npm run serve