Vant+postcss-pxtoremはブラウザ適応機能を実装します

Remレイアウトの適応
Vant のスタイルでは、デフォルトで px を単位として使用します。rem 単位を使用する必要がある場合は、次の 2 つのツールをお勧めします。
postcss-pxtoremは単位をremに変換するためのpostcssプラグインです。
lib-flexibleはremベース値を設定するために使用されます
最後にサプライズがあります！

1. npmのインストール

npm をインストール postcss-pxtorem --save

2. 新しい.postcssrc.jsを作成し、次の変更を加えます。

注記：
1. 以下のコメントコードをオンにすると、スクリプト実行時にエラーメッセージが表示されます。何のためか分かりませんが、とりあえずコメントアウトします。

モジュール.エクスポート = {
 「プラグイン」: {
 	//"postcss-import": {},
  //"postcss-url": {},
  「自動プレフィックス」: {
   ブラウザ: ['Android >= 4.0', 'iOS >= 7']
  },
  "postcss-pxtorem": {
   "ルート値": 32,
   "propList": ["*"]
  }
 }
}

3. 新しいrem.jsを作成する

定数ベースサイズ = 32
// rem関数を設定する function setRem() {
 // 現在のページ幅を 750 幅に対して拡大縮小する比率。必要に応じて変更できます。
 定数スケール = document.documentElement.clientWidth / 750
 // ページのルートノードのフォントサイズを設定します。 document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// setRem() を初期化する
// ウィンドウサイズを変更するときに rem をリセットする
window.onresize = 関数 () {
 リセット()
}

4. main.jsにrem.jsを導入する

「./rem.js」をインポートします

この時点で、Vant+postcss-pxtorem のブラウザ適応は完了です。
スタイルで px を使用して、自動的に rem に変換できます。
待って、まだ行かないで！！！お客様。
これで終わりだと思いますか? いいえ、postcss-pxtorem に基づかない別の rem 適応があります。
では、これ以上長々とせずに、すぐにコードを見てみましょう。

5. 新しいrem.jsを作成し、main.jsに導入する

(関数 (doc, win) {
 var docEl = doc.documentElement
 var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
 var recalc = 関数（）{
  var クライアント幅 = docEl. クライアント幅
  if (!clientWidth) 戻り値
  （parseInt（20 *（クライアント幅/ 320））> 35）の場合{
   docEl.style.fontSize = 35 + 'px'
  } それ以外 {
   docEl.style.fontSize = 20 * (クライアント幅 / 320) + 'px'
  }
 }
 if (!doc.addEventListener) 戻り値
 win.addEventListener(resizeEvt、再計算、false)
 doc.addEventListener('DOMContentLoaded', 再計算, false)
})(ドキュメント、ウィンドウ)

「./rem.js」をインポートします

6. スタイルグローバル変数を追加して使用する

// 現在のページ幅を 750 幅に対して拡大縮小する比率。必要に応じて変更できます。
$残り: (640/750)/40;
体{
	幅: $rem * 24rem;
}

これで、ブラウザ適応を実現するための Vant+postcss-pxtorem に関するこの記事は終了です。Vant+postcss-pxtorem 適応に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: