序文 以前、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 サーバーは、さまざまなシステムのディレクトリを異なる論理パーティションに配...
Vue を学習する際に、vscode ターミナルで常に webpack 命令を使用すると、次のよう...
本来、この第 7 章では、デザインにおけるレイヤーと空間テクニックについて深く議論するはずです。しか...
この記事では主に、NUXT の validate メソッドに基づいてフォーム検証を実装する方法につい...
1. サーバー環境の構成: 1. ディスクパーティションを確認します。最近、あるプロジェクト内のサー...
目次1. この Web サイトには SQL インジェクションの脆弱性がある可能性があることが判明しま...
目次トピック分析する基本的な解決策基本的な再帰再帰最適化要約するトピック私たちが答えなければならない...
目次UIデザインEcharts の例の効果序文サンプルコード最終結果UIデザイン Echarts の...
恥ずかしながら、このようなよく使われるチェックボックスのスタイルを変更するために、Baidu で長い...
目次1. 反射とは何ですか? 2. JavaScriptで反映する2.1 Reflect.get(タ...
以下の例では、名前が入っている td の幅が 60px のとき、2 行目の文字数が少ない場合は正常に...
前提条件: content="width=750" <meta name=...
テーブルを削除することはあまり一般的ではありませんが、特に外部キーの関連付けがあるテーブルの場合は、...
序文仕事では、毎週従業員が提出した資料を数える必要がありますが、それを一つずつコピーして貼り付けるの...
1. はじめにElasticsearchは現在非常に人気があり、多くの企業が利用しているため、esを...