快捷導(dǎo)航

移動端h5屏幕適配方案(使用PostCSS插件)

更新時間：2026年05月21日 10:16:38 作者：涼_橙

移動端屏幕大小不一,要使網(wǎng)頁能自適應(yīng)不同尺寸的手機(jī)屏幕,而且還要盡可能開發(fā)便捷,目前使用最多的還是rem大法,這篇文章主要介紹了移動端h5屏幕適配方案的相關(guān)資料,需要的朋友可以參考下

Rem + PostCSS插件

使用PostCSS插件將項(xiàng)目中的px單位自動轉(zhuǎn)換為rem，搭配JS動態(tài)設(shè)置根字體大小（監(jiān)聽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,//根據(jù)設(shè)計(jì)稿進(jìn)行配置，如果設(shè)計(jì)稿寬度為750則配置75
          propList: ['*'],
          unitPrecision: 5,
          minPixelValue: 2,
          exclude: /node_modules/i,
        }),
      ],
    }
  },
})

配合的js代碼，監(jiān)聽視口變化改變根元素大小

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

Viewport單位

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

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', // 要轉(zhuǎn)換的單位
          viewportWidth: 750, // 設(shè)計(jì)稿的視口寬度，一般是375
          unitPrecision: 5, // 轉(zhuǎn)換后的精度，即小數(shù)點(diǎn)位數(shù)
          propList: ['*'], // 指定轉(zhuǎn)換的CSS屬性的單位，*代表全部css屬性都轉(zhuǎn)換
          viewportUnit: 'vw', // 指定需要轉(zhuǎn)換成的視口單位，建議使用vw
          fontViewportUnit: 'vw', // 字體使用的視口單位
          selectorBlackList: ['.ignore-'], // 指定不轉(zhuǎn)換為視口單位的類名
          minPixelValue: 1, // 默認(rèn)值1，小于或等于1px則不進(jìn)行轉(zhuǎn)換
          mediaQuery: false, // 是否在媒體查詢的css代碼中也進(jìn)行轉(zhuǎn)換，默認(rèn)false
          replace: true, // 是否直接更換屬性值，而不添加備用屬性
          exclude: [/node_modules/], // 忽略某些文件夾下的文件或特定文件
        })
      ]
    }
  }
})

Flexible / Rem

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

針對特殊情況進(jìn)行處理

以下兩種方案均適配上面的Rem + PostCSS插件和Viewport單位 比如場景：滾動到遮住頭部組件的位置，頭部位置在設(shè)計(jì)稿上是150px，這種怎么實(shí)現(xiàn)

方案1：就是通過offsetHeight，直接獲取到針對于不同機(jī)型上真實(shí)的px值
方案2：使用方法進(jìn)行轉(zhuǎn)，直接傳入設(shè)計(jì)稿上的高度就完事，會自動適配出對應(yīng)px然后進(jìn)行scrolltop的賦值即可

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