vue3+vant h5: Rem 移動端布局適配之postcss-pxtorem和lib-flexible

如果不引入插件的話：ui稿的px轉化成rem需自己計算

根據設計稿我們需要自己計算元素的rem（假如我們將html根元素font-size設置為41.4px）；
那么1rem=41.4px; ui稿上的375px = 375/41.4rem=9rem;
這樣每個元素進行計算是不是得瘋，vant組件中推薦的適配方法：

postcss-pxtorem

1. 安裝yarn add postcss-pxtorem@5.1.1 -D
2. postcss.config.js中配置

module.exports = {
  plugins: {
    autoprefixer: {
      Browserslist: ["Android >= 4.0", "iOS >= 7"],
    },
    "postcss-pxtorem": {
      rootValue: 37.5, //結果為：設計稿元素尺寸/37.5，比如元素寬375px,最終頁面會換算成 10rem
      propList: ["*"],
    },
  },
};

該插件自動將 px 單位轉化為 rem 單位；（注意目前版本要在6以下，不然postcss不支持會報錯）；
結果為：設計稿元素尺寸/37.5，比如元素寬375px,最終頁面會換算成 10rem；
rootValue可以根據ui稿子進行調整：rootValue=ui稿子總寬度/10
如果不想被轉換，那么px可以寫成Px；

lib-flexible（已升級為amfe-flexible）

1. 安裝yarn add amfe-flexible
2. public/index.html中引入viewport

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

3. main.js中引入amfe-flexible

// 移動端適配
import "amfe-flexible";

該插件用於設置 rem 基准值;
我理解的是根據手機寬度=10rem進行換算；比如手機寬414px=10rem; 那么html的font-size=1rem=41.4px;
效果如下：

總結

經過postcss-pxtorem和amfe-flexible兩個插件的適配，就能自動實現： ui稿的總寬度=10rem=10*(html font-size) -> 均代表瀏覽器的總寬度

我們假設ui稿子是這樣的

那么插件自動適配計算大概是如下：