【Vue】PC 端 postcss-pxtorem vite 頁面響應式配置

安裝

npm install postcss-pxtorem

vite.config.ts

import postCssPxToRem from "postcss-pxtorem"

...css: {
    postcss: {
      plugins: [
        postCssPxToRem({
          rootValue: 16, // 1rem的大小
          propList: ['*'], // 需要轉換的屬性，這裏選擇全部都進行轉換
        })
      ]
    }
  },

rem.ts

// 基準大小
const baseSize = 16;
// 設置 rem 函數
function setRem() {
  // 當前頁面寬度相對於 1920 寬的縮放比例，可根據自己需要修改。
  const scale = document.documentElement.clientWidth / 1920;
  // 設置頁面根節點字體大小, 瀏覽器字體大小最小爲12 ↓ 採用下面
  // let fontSize = baseSize * Math.min(scale, 2) > 12 ? baseSize * Math.min(scale, 2) : 12;
  // electron 可以更小 ↓ （個人項目需要）
  let fontSize = baseSize * Math.min(scale, 2)
  document.documentElement.style.fontSize = fontSize + "px";
}
// 初始化
setRem();
// 改變窗口大小時重新設置 rem,這裏最好加上節流
window.onresize = function () {
  setRem();
};

main.ts

import './rem'