如果使用Vue進行移動端頁面的開發，需要對不同機型的寬高進行適配。最常用的方法是使用amfe-flexable和postcss-pxtorem這兩個外掛來幫助進行適配。

amfe-flexable

amfe-flexable是阿里釋出的一套可伸縮適配方案。它能根據裝置的寬高來設定頁面body元素的字型大小，將1rem設定為裝置寬度/10以及在頁面大小轉換時可以重新計算這些數值。

具體可見github連線：https://github.com/amfe/lib-flexible

postcss-pxtorem

postcss-pxtorem是postcss的一個外掛，可以將對應的畫素單位轉換為rem。在vite中可以直接對其進行配置，因為vite已經集成了postcss。

其中最重要的配置屬性為：

• rootValue：根元素的值，即1rem對應的畫素值大小。一般設定為設計稿尺寸/10

以及一些其他屬性：

• propList：需要進行轉換的css屬性的值，可以使用萬用字元。如：*意思是將全部屬性單位都進行轉換；["*position*"]會匹配到background-position-y
• selectorBlackList：不進行單位轉換的選擇器。如設定為字串body，則所有含有body字串的選擇器都不會被該外掛進行轉換；若設定為[/^body$/]，則body會被匹配到而不是.body
• exclude：不需要進行單位轉換的檔案
• mediaQuery：是否允許畫素在媒體查詢中進行轉換

在Vite中進行配置使用

外掛安裝

//npm方式
npm install postcss-pxtorem --save-dev
npm install amfe-flexible --save-dev

//pnpm方式
pnpm add postcss-pxtorem -D
pnpm add amfe-flexible -D

在main.ts中引入：

import 'amfe-flexible'

可以看到，html元素的字型大小被設定為**裝置寬度/10，**證明amfe-flexible配置成功：

在vite.config.js中配置postcss-pxtorem：

import postCssPxToRem from "postcss-pxtorem"
...

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

這裡本來設定el-input元素的寬度為350px，但是使用了postcss-pxtorem之後會將px轉換為rem，參照的基準就是rootValue，所以此處得到350/37.5=9.333…rem：

由於rootValue是固定的，所以元素計算出來的rem單位也是一個固定的值（如上例的9.33）。但是在amfe-flexable會計算不同寬高裝置的元素的根字型大小，所以每次都能計算得到一個適配的寬高。如上例中，9.333rem在iPhone X（375812）中會被計算為9.333*37.5：

但是在iPhone 8 Plus（414736）中，同樣是9.333rem，這個元素的寬度被計算為9.333*41.4：

這樣，我們就可以按照設計稿給出的畫素尺寸進行開發，而在不同的移動裝置上進行適配了。