rem 移動端自適應 vue vant postcss-pxtorem lib-flexible

rem 移動端自適應 移動端適配

在用 vue cli3.x 寫項目的過程中，遇到了一些問題，當我 用 Vant 框架時，官方文檔提示說 Vant的樣式默認使用 px 作單位，如果使用 rem 的話，推薦使用以下兩個工具：

postcss-pxtorem 是一款 postcss 插件，用於將單位轉化為 rem

lib-flexible 是一款 postcss 插件，用於將單位轉化為 rem

Vant 還提供了一份 postcss 配置。

module.exports = {
  plugins: {
    autoprefixer: {
      browsers: ['Android >= 4.0', 'iOS >= 8'],
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};

按照上述代碼的確可以實現移動端自適應，可是 rootValue 37.5的值是按照 750設計稿的一半來實現的，也就是說 37.5 會讓 第三方 UI 框架 1:1還原，但是這樣違背了初衷，你拿到 750 的設計稿，不能直接寫原標注尺寸，要將值先除以 2 在寫值（100的px，要寫50px）。而且這個計算還是在 dpr=1 的死值情況下，我們用的 lib-flexible 插件會動態計算這個值，那樣的 vant UI 組件會很不好控制 ，而且 37.5 這個基准值就不是很適合了。如果你不希望修改 第三方 UI 框架，那么改以下配置：

一、安裝 lib-flexible

該插件是手淘的一種可伸縮布局方案。

npm i amfe-flexible -S // 縮寫
npm install amfe-flexible --save

然后在main.js中導入此模塊。

import 'amfe-flexible/index'

二、安裝 postcss-pxtorem

可以將 px 單位自動轉換為 rem。

npm i postcss-pxtorem -D // 縮寫
npm install postcss-pxtorem --save-dev

三、修改 meta 標簽頭

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

四、添加 .postcssrc.js

如果腳手架工具沒有創建這個 .postcssrc.js 文件，那就在根目錄下新建.postcssrc.js，並添加以下配置。

module.exports = {
  "plugins": {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 75,
      propList: ['*', '!font-size'],
      exclude: /node_modules|folder_name/i
    }
  }
}

rootVale 改為 75 我們可以直接寫 750 設計稿的原 px 單位。然后添加 exclude 忽略掉引入的 UI 框架，還可以添加 propList 可以不轉換你所希望的值，比如 'font-size'，要添加多個以逗號隔開。

bingo