最近、以前のフロントエンド研究のメモを整理したところ、モバイル Web の画面適応 (rem) の側面についてはあまり理解しておらず、使い方だけは知っているだけであることがわかりました。
次に、モバイル Web 画面の適応 (rem) についての考えをいくつか記録します。
レムの紹介rem はルート要素 (<html>) のフォントサイズのサイズを表します。つまり、ルート要素のフォントサイズが 14px の場合、1rem = 14px となります。
レムはモバイルウェブに適応します適応効果サイズの異なる画面では、同じ要素のサイズは同じように見えませんが、それらが占める画面幅の割合は同じです。
コード
// HTML ファイルの head タグ内 <script type=text/javascript> (function(){ var html = document.documentElement; // 画面幅 (px) を取得します var hWidth = html.getBoundingClientRect().width; // HTML タグのフォント サイズを hWidth/15 に設定します html.style.fontSize = hWidth/15 + 'px'; })()</スクリプト> //less/* で変数 @r: 750/15 */@r:50rem; div { width: 100/@r; height: 200/@r;} JavaScriptコードまず、画面サイズの1/15（px）をhtmlタグのfont-size属性にコピーします。この時点で、画面サイズの 1/15 ピクセル (px) は、どの画面サイズでも 1rem のサイズに等しくなります。つまり、どの画面サイズでも、同じ rem 値が要素に設定されている限り、その要素はすべての画面サイズで画面幅の同じ割合を占め、その割合も同じになり、要素に適応します。すべての画面サイズ。
コードが少なくなるあとは、デザインドラフトの要素のpx単位をrem単位に変換するだけです。
したがって、現時点では、デザイン案はある程度の大きさの携帯電話の画面とみなすことができます。
私の例では、デザイン案の幅は750pxです。
したがって、750/15 = 50px、つまりデザイン案のサイズの携帯電話の画面では、1rem = 50pxとなります。
次に、less コードで変数 @r を定義します。
div の幅は 100px と測定されます。デザイン ドラフトのサイズの画面では 1rem = 50px であるため、div の rem 値は 100/50 rem、つまり 100/@r となります。
div の高さは 200px と測定されます。デザイン ドラフトのサイズの画面では 1rem = 50px であるため、div の rem 値は 200/50 rem、つまり 200/@r となります。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。