序文 モバイル端末のREM適応ソリューションのレビューと概要 remの使い方 rem 単位の計算は、HTML のルート ノードのフォント サイズを参照します。ルート ノードのフォントが変更されると、レイアウトによって参照される rem ページもそれに応じて拡大縮小されます。これが rem レイアウトの本質です。 1. HTMLのフォントサイズの値を動的に変更する ほぼすべてのブラウザは HTML のフォント サイズを 16px に初期化します。動的に変更したい場合は、rem によって適応されたルート ノードのフォント サイズの初期値として 16px を一時的に設定できます。 では、動的な変更にはどのように適応すればよいのでしょうか? デザインの幅が 750 ピクセルであると仮定し、レイアウトに 1rem = 16 ピクセルの単位を使用するように定義しますが、どのように適応すればよいでしょうか? Chrome 上の iPhone シミュレーターの幅は 375px で、これはデザイン案のちょうど半分です。 暗算すると、そのときの 1rem は初期化時の HTML ノードのフォント サイズの半分、つまり newFontSize = 16/2 = 8px に等しいはずです。 半分ずつに適合しているのではないでしょうか。 ここから、デザイン ドラフトの幅 / 16 px = 適応するデバイスの幅 / 8 px という式が得られます。新しいフォント サイズは、現在のデバイスの幅と元のデザイン ドラフトの幅に基づいて比例して拡大縮小されることがわかります。 最後に、newFontSize = 16px * 適応するデバイスの幅 / 元のデザインの幅 (関数(doc, win) { var resizeEvt = ウィンドウ内の「orientationchange」?「orientationchange」:「resize」、 setRemResponse = 関数() { var vM = 750; var vfontSize = 16; var html = doc.documentElement; var newfontSize = (vfontSize * html.clientWidth) / vM; html.style.fontSize = 新しいフォントサイズ + "px"; }; doc.addEventListener("DOMContentLoaded", setRemResponse, false); win.addEventListener(resizeEvt、setRemResponse、false); })(ドキュメント、ウィンドウ); 2. 実際の使用 測定されたbtnボタンスタイルをpxからremに変換する .btn{ 幅: 699px; /* 699/16 => 43.6875rem; */ 高さ: 90px; /* 90/16px => 5.625rem; */ 背景: rgba(90, 173, 246, 1); 境界線の半径: 6px; /* 6/16=> 0.375rem; */ } 計算が面倒すぎるので、計算処理の代わりにscssを使って関数を定義します。 @function pxToRem($initialStyle) { @return $initialStyle/16 * 1rem; } 上記の CSS は次のように書き換えられます。 .btn{ 幅: pxToRem(699); 高さ:pxToRem(90); 背景: rgba(90, 173, 246, 1); 境界線の半径:pxToRem(6); } 補足: vscodeのプラグインcssremは、css、scssに入力したpxをrem単位に変換する計算をサポートしています。デフォルトのフォントサイズは16pxに設定されています。 計算方法の変更、暗算の残余 1. 簡単な分析 前のセクションを分析すると、最終的にnewFontSize = 16px * 適応するデバイスの幅 / 元のデザインの幅が得られます。 計算するたびに 16 で割るのは非常に面倒です。初期の HTML ルート ノードの font-size を計算しやすいように変更すると、最終的には除数として機能するため、どのような値になるでしょうか。100 の方が便利ですか。それは正しい! 定数 oHtml = document.documentElement; 定数 clientWidth = oHtml.clientWidth; var vM = 750; var vfontSize = 100; // モバイルデバイス oHtml.style.fontSize = (vfontSize * clientWidth) / vM + "px"; 2. 実際の使用 引き続き、上記の使い慣れたボタンを使用して、px を rem に変換し、結果を頭の中で計算します。 .btn{ 幅: 699px; /* 699/100 => 6.99rem; */ 高さ: 90px; /* 90/100 => 0.9rem; */ 背景: rgba(90, 173, 246, 1); 境界線の半径: 6px; /* 6/100=> 0.06rem; */ } 正直に言うと、scss があると本当に便利です! @function を100倍に減らす($initialStyle) { @return $initialStyle/100 * 1rem; } 上記の CSS 関数メソッドは次のように書き換えられます。 .btn{ 幅: 縮小100(699); 高さ:縮小100(90); 背景: rgba(90, 173, 246, 1); 境界線の半径:縮小100(6); } どうですか、レムはそんなに簡単なんですね! ! ! ユーティリティ関数 上記のどちらの方法も選択できます。結局のところ、JavaScript の実行効率は悪くありません! (関数(doc, win) { var resizeEvt = ウィンドウ内の「orientationchange」?「orientationchange」:「resize」、 setRemResponse = 関数() { var vM = 750; var vfontSize = 16; var html = doc.documentElement; var newfontSize = (vfontSize * html.clientWidth) / vM; html.style.fontSize = 新しいフォントサイズ + "px"; }; doc.addEventListener("DOMContentLoaded", setRemResponse, false); win.addEventListener(resizeEvt、setRemResponse、false); })(ドキュメント、ウィンドウ); 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: Dockerコンテナの中国語言語パックの設定の問題を解決する
>>: Vue のドロップダウン ボックスのセカンダリ リンク効果を実装するためのサンプル コード
この記事では、MySQL 8.0.16圧縮パッケージのインストールと設定方法を参考までに紹介します。...
ショートハンドプロパティは、複数のプロパティに同時に値を割り当てるために使用されます。たとえば、fo...
目次実際のプロジェクトで遭遇する要件実装が間違っているところもある私は個人的に、実装するより良い方法...
今日、私はクラスメートが問題を解決するのを手伝いました - Tomcat の起動が非常に遅く、約 5...
まず最初に指摘しておきたいのは、人間は視覚的な区分を通じてコンテンツの意味を判断できるが、検索エ...
目次百万レベルのデータ処理ソリューションデータストレージ構造設計クエリステートメントの最適化1000...
目次メッセージボード必要なライブラリオープンソースプロジェクトプロジェクト構造メッセージボードnod...
まずコードを見てみましょう #/bin/sh datename=$(日付 +%Y%m%d-%H%M%...
この記事では、MySQL 学習ノートの select ステートメントの完全な使用方法を例を使用して説...
独自のデモを作成するときに、display:flex を使用して垂直方向の中央揃えを実現したいと思い...
目次次のチェックv-model 構文シュガー.sync 修飾子$セット計算プロパティセット要約する次...
MySQL にリモートでログインする場合、使用するアカウントには特別な要件があります。アカウントのデ...
IPマスカレードとポート転送Firewalldは2種類のネットワークアドレス変換をサポートしています...
この記事では、参考までにMySQL 5.7.16の無料インストール版のチュートリアルを紹介します。具...
目次序文1. Dockerをインストールする2. Dapr CLIをインストールする3. Net6 ...