大屏自適應（postcss-px2rem）

1、安裝postcss-px2rem

npm install postcss-px2rem px2rem-loader --save

2、在根目錄src中新建util目錄下新建rem.js等比適配文件

ps：如果 根目錄 src 中未能找到util目錄，那么你需要自己創建一個。

 

 代碼：

 

// rem等比適配配置文件
// 基准大小
const baseSize = 16;
// 設置 rem 函數
function setRem() {
  // 當前頁面屏幕分辨率相對於 1920寬的縮放比例，可根據自己需要修改
  const scale = document.documentElement.clientWidth / 1920;
  // 設置頁面根節點字體大小（“Math.min(scale, 2)” 指最高放大比例為2，可根據實際業務需求調整）
  document.documentElement.style.fontSize =
    baseSize * Math.min(scale, 2) + "px";
}
// 初始化
setRem();
// 改變窗口大小時重新設置 rem
window.onresize = function () {
  setRem();
};

3、在 main.js中引入 rem.js文件

根據自己的實際路徑引入

import “xx/util/rem.js”

4、在vue.config.js中配置插件

ps：同2，如果未能找到該文件，自己創建

 

 代碼：

 

// 引入等比適配插件
const px2rem = require('postcss-px2rem')

// 配置基本大小
const postcss = px2rem({
  // 基准大小 baseSize，需要和rem.js中相同
  remUnit: 16
})

// 使用等比適配插件
module.exports = {
  lintOnSave: true,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
        ]
      }
    }
  }
}

 ps1：截圖與代碼不同的原因是因為我這里還配置了另一個插件。