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

レム適応の一般的なパッケージ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 のみを使用して折りたたまれたヘッダー効果を作成する方法の例コード

推薦する

UbuntuでMySQLデータベースファイルディレクトリを変更する方法

序文同社の Ubuntu サーバーは、さまざまなシステムのディレクトリを異なる論理パーティションに配...

Webデザインの経験: Webコードを効率的に書く

本来、この第 7 章では、デザインにおけるレイヤーと空間テクニックについて深く議論するはずです。しか...

Vueはフォーム検証機能を実装します

この記事では主に、NUXT の validate メソッドに基づいてフォーム検証を実装する方法につい...

Centos6 で 20TB を超えるディスクをパーティション分割してフォーマットするためのサンプル コード

1. サーバー環境の構成: 1. ディスクパーティションを確認します。最近、あるプロジェクト内のサー...

sqlmap インジェクションの詳細なグラフィック説明

目次1. この Web サイトには SQL インジェクションの脆弱性がある可能性があることが判明しま...

フィボナッチ数列のJavaScript出力を実装する方法

目次トピック分析する基本的な解決策基本的な再帰再帰最適化要約するトピック私たちが答えなければならない...

複数の X 軸を使用して 7 日間の天気予報を実現するための Echarts サンプル コード

目次UIデザインEcharts の例の効果序文サンプルコード最終結果UIデザイン Echarts の...

美しいチェックボックススタイル(複数選択ボックス)はIE8/9/10、FFなどと完全に互換性があります。

恥ずかしながら、このようなよく使われるチェックボックスのスタイルを変更するために、Baidu で長い...

フロントエンド JavaScript におけるリフレクションとプロキシ

目次1. 反射とは何ですか? 2. JavaScriptで反映する2.1 Reflect.get(タ...

td セルを結合した場合の td 幅の問題

以下の例では、名前が入っている td の幅が 60px のとき、2 行目の文字数が少ない場合は正常に...

MySQL テーブルを削除するときに外部キー制約を無視するシンプルな実装

テーブルを削除することはあまり一般的ではありませんが、特に外部キーの関連付けがあるテーブルの場合は、...

JavaScript の差異を利用して比較ツールを実装する

序文仕事では、毎週従業員が提出した資料を数える必要がありますが、それを一つずつコピーして貼り付けるの...

Docker で ElasticSearch と Kibana をインストールするためのサンプル コード

1. はじめにElasticsearchは現在非常に人気があり、多くの企業が利用しているため、esを...