pc大屏適配

light丶發表於2024-11-03

在檔案utils裡配置

const baseSize = 12
//設定rem函式
function setRem() {
    //頁面寬度相對於設計圖寬的縮放比例，根據需要修改 1920(設計稿寬度)
    const scale = document.documentElement.clientWidth / 1920;
    // 設定頁面根節點字型大小（match.min(scale,2)"指最高放大比例為2 根據需要修改）
    document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
//初始化
//改變視窗大小時重新設定rem
window.onresize = function () {
    setRem()
}

然後在 main.js裡進行全域性引用

import './utils/px2rem.js'

在去consfing.js裡配置 我這裡是在vite.config.js裡配置的，不透過打包方式，配置有點區別

const px2rem = require('postcss-px2rem');
const postcssRem = px2rem({
  //基準大小 baseSize,需要和rem.js相同
  remUnit: 12,
})
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // 自動匯入定製化樣式檔案進行樣式覆蓋
        additionalData: `
          @use "@/styles/element/index.scss" as *;
          @use "@/styles/var.scss" as *;
        `,
      }
    },
    postcss: {
      plugins: [postcssRem]
    }
  },
})

效果如圖

在1920*1080下fonsize的字型大小是12px

注：不要寫行內樣式不然轉換不了，如果px不想被轉換可以寫大小的PX

相關文章