レム適応の一般的なパッケージ3つについて

序文

以前、rem適応についての記事を書きましたが、具体的なパッケージは紹介しませんでした。今日は、よく使われる3つの方法を紹介し、皆さんの参考になればと思います。エディターと一緒に学んでいきましょう。

1. rem1.js

最初の方法は、m 側の画面回転の問題を考慮しています。互換性のためにいくつかの処理が行われています。詳細についてはコードを参照してください。

エクスポート関数 rem (doc, win) {
  docEl = doc.documentElement とします。
  // 画面回転イベントを考慮し、互換性を持たせる let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  再計算 = 関数 () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) 戻り値:
            クライアント幅 >= 750 の場合
                 docEl.style.fontSize = '100px';
            } それ以外 {
                 docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            }
      };

   doc.addEventListener の場合、戻り値は次のようになります。
    win.addEventListener(resizeEvt, recalc, false); // 画面のサイズと回転に適応します doc.addEventListener('DOMContentLoaded', recalc, false); // ページが最初に開かれたときに適応します recalc();
};

2. rem2.js

計算には HTML タグの offsetWidth の長さが使用されます。

エクスポート関数 rem() {
  var fz = document.querySelector('html').offsetWidth / 7.5; //デザイン図 750 1rem=100px
  document.querySelector('html').style.fontSize =
    fz <= 100 ? fz + 'px' : '100px';
  window.onresize = 関数() {
    レム();
  };
};

3. rem3.js

window.innerWidth を使用して計算すると、フォントの継承を防止するために body fontSize が設定され、ページのフォントが大きくなりすぎます。

エクスポート関数 rem() {
  document.documentElement.style.fontSize = window.innerWidth / 7.5 + 'px'; //1rem = 100px
  document.body.style.fontSize = '14px'; // ページにスタイルのない大きすぎるフォントが表示されないように、本文のフォント サイズを復元します}

要約する

上記はこの記事の全内容です。この記事の内容が皆さんの勉強や仕事に一定の参考学習価値を持つことを願っています。ご質問があれば、メッセージを残してコミュニケーションしてください。123WORDPRESS.COM を応援していただきありがとうございます。

<<: MySQL/MariaDB でピボットテーブルを実装する方法のサンプルコード

>>: CSS のみを使用して折りたたまれたヘッダー効果を作成する方法の例コード