🧑‍💻 寫在開頭

點贊 + 收藏 === 學會🤣🤣🤣

em + PostCSS插件

使用PostCSS插件將項目中的px單位自動轉換為rem，搭配JS動態設置根字體大小（監聽window.resize）。

vite配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pxtorem from 'postcss-pxtorem'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    postcss:{
      plugins: [
        pxtorem({
          rootValue: 75,//根據設計稿進行配置，如果設計稿寬度為750則配置75
          propList: ['*'],
          unitPrecision: 5,
          minPixelValue: 2,
          exclude: /node_modules/i,
        }),
      ],
    }
  },
})

配合的js代碼，監聽視口變化改變根元素大小

// 處理各機型適配的fontsize
function handleRem() {
  const baseSize = 75;// 與postcss配置中的rootValue保持一致
  const scale = document.documentElement.clientWidth / 750;
  document.documentElement.style.fontSize =
    baseSize * Math.min(scale, 2) + 'px';
}
// 初始化設置根元素的值
handleRem()
// 監聽窗口變化，根據窗口變化來改變根元素的值
window.addEventListener('resize', handleRem)

Viewport單位

使用純CSS的視口單位（vw, vh）進行佈局，視口變化時元素尺寸自動縮放

vite配置

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import postcsspxtoviewport from 'postcss-px-to-viewport'

export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [
        postcsspxtoviewport({
          unitToConvert: 'px', // 要轉換的單位
          viewportWidth: 750, // 設計稿的視口寬度，一般是375
          unitPrecision: 5, // 轉換後的精度，即小數點位數
          propList: ['*'], // 指定轉換的CSS屬性的單位，*代表全部css屬性都轉換
          viewportUnit: 'vw', // 指定需要轉換成的視口單位，建議使用vw
          fontViewportUnit: 'vw', // 字體使用的視口單位
          selectorBlackList: ['.ignore-'], // 指定不轉換為視口單位的類名
          minPixelValue: 1, // 默認值1，小於或等於1px則不進行轉換
          mediaQuery: false, // 是否在媒體查詢的css代碼中也進行轉換，默認false
          replace: true, // 是否直接更換屬性值，而不添加備用屬性
          exclude: [/node_modules/], // 忽略某些文件夾下的文件或特定文件
        })
      ]
    }
  }
})

Flexible / Rem

淘寶舊方案，通過JS模擬viewport和rem，主要解決過去移動端高清屏的適配問題。沒有具體實踐過

針對特殊情況進行處理

以下兩種方案均適配上面的Rem + PostCSS插件和Viewport單位比如場景：滾動到遮住頭部組件的位置，頭部位置在設計稿上是150px，這種怎麼實現

方案1：就是通過offsetHeight，直接獲取到針對於不同機型上真實的px值
方案2：使用方法進行轉，直接傳入設計稿上的高度就完事，會自動適配出對應px然後進行scrolltop的賦值即可

// 根據設計稿上的px，計算出當前設備真實適配的 px 值
/**
 * @param px 設計稿的px值
 * @param isFormat 是否返回帶px單位的字符串，默認true
 * @param designWidth 設計稿的寬度，默認750px，根據實際情況修改
 * @returns 適配後的px值
 * */
export const pxValueToPx = (px: number, isFormat: boolean = true, designWidth: number = 750) => {
    // 基準設計稿寬度（通常為 750px）
    const _designWidth = designWidth;
    // 獲取當前設備的屏幕寬度
    const windowWidth = document.documentElement.clientWidth;
    // 計算縮放比例
    const scale = windowWidth / _designWidth;
    // 返回自適應後的 px 值
    return isFormat ? `${px * scale}px` : px * scale;
}