rem移動端適応vue vant postcss-pxtoremlib-flexible

rem移動端適応移動端適合
vue cli 3を使用しています.xプロジェクトを書く過程で、いくつかの問題が発生しました.Vantフレームワークを使用すると、公式ドキュメントにVantのスタイルはデフォルトでpxを単位として使用するように提示されました.remを使用する場合は、以下の2つのツールを使用することをお勧めします.
postcss-pxtoremは、単位をremに変換するpostcssプラグインです.
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、50 px)します.また、この計算が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タグヘッドの修正

四、追加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