ホームページ > 記事 > ウェブフロントエンド > モバイル Web 画面適応の概要 (rem)
この記事では主にモバイルWeb画面適応(rem)について紹介します。モバイル Web スクリーン アダプテーション (rem) について詳しく紹介されています。非常に優れた内容なので、参考にさせていただきます。
はじめに
最近、以前のフロントエンド研究のメモを整理したところ、モバイル Web の画面適応 (rem) の側面についてはあまり理解しておらず、その使い方を知っているだけだったことがわかりました。
次に、モバイル Web 画面への適応 (レム) についての考えをいくつか記録します。
rem はじめに
rem は、ルート要素 (100db36a723c770d327fc0aef2ce13b1) の font-size のサイズを表します。つまり、ルート要素のフォントサイズが 14px の場合、1rem = 14px
rem モバイルウェブへの適応
適応効果
異なる画面上の同じ要素のサイズサイズ 同じサイズに見えませんが、画面幅の同じ割合を占めます。
Code
// 在 html 文件的 head 标签中 <script type="text/javascript"> (function(){ var html = document.documentElement; // 获取屏幕宽度(px) var hWidth = html.getBoundingClientRect().width; // 设置 html 标签的 font-size 大小为 hWidth/15 html.style.fontSize = hWidth/15 + 'px'; })() </script>
// 在 less 中 /* 定义变量@r:750/15 */ @r:50rem; p { width: 100/@r; height: 200/@r; }
javascript code
まず、htmlタグのfont-size属性に画面サイズ(px)の1/15をコピーします。この時点で、画面サイズの 1/15 ピクセル (px) は、どの画面サイズでも 1rem のサイズに等しくなります。つまり、どの画面サイズでも、同じ rem 値が要素に設定されている限り、その要素はすべての画面サイズで画面幅の同じ割合を占め、その割合も同じになり、要素に適応します。すべての画面サイズ。
コードレス
これで、デザインドラフトの要素のピクセル単位をレム単位に変換するだけで済みます。
ということで、現時点ではデザイン案を一定サイズの携帯電話の画面として扱うことができます。
私の例では、デザインの幅は750ピクセルです。
つまり、750/15 = 50px、つまり、デザイン案のサイズの携帯電話の画面では、1rem = 50pxとなります。
次に、less コードで変数 @r を定義します。
デザインドラフトのサイズの画面では 1rem = 50px であるため、p の幅は 100px と測定されます。したがって、p の rem 値は 100/50 rem、つまり 100/@r となります。
デザインドラフトのサイズの画面では 1rem = 50px であるため、p の高さは 200px と測定されます。したがって、p の rem 値は 200/50 rem、つまり 200/@r となります。
上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。
関連する推奨事項:
HTMLページにおけるメタの役割とページのキャッシュと非キャッシュ設定の分析
以上がモバイル Web 画面適応の概要 (rem)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。