モバイルウェブ画面適応（rem）

序文

最近、フロントエンドの学習に関する以前のメモを整理したところ、モバイル Web 画面の適応 (rem) をあまり理解しておらず、使い方だけを知っていたことがわかりました。

次に、モバイル Web 画面の適応 (rem) に関する私の考えをいくつか記録します。

レムはじめに

rem はルート要素 (<html>) のフォントサイズを表します。つまり、ルート要素のフォントサイズが14pxの場合、1rem = 14pxとなります。

モバイルウェブに適応したrem

適応効果

異なるサイズの画面では、同じ要素のサイズは同じに見えない場合があります。ただし、画面幅に占める割合は同じです。

コード

// HTML ファイルの head タグ内 <script type="text/javascript">
  （関数（）{
    var html = document.documentElement;
    // 画面の幅（px）を取得します
    var hWidth = html.getBoundingClientRect().width;
    // HTMLタグのフォントサイズをhWidth/15に設定する
    html.style.fontSize = hWidth/15 + 'px';
  })()
</スクリプト>

// less で /* 変数 @r: 750/15 を定義します */
@r:50レム; 
div {
  幅: 100/@r;
  高さ: 200/@r;
}

javascriptコード

まず、画面サイズ（px）の1/15をhtmlタグのfont-size属性にコピーします。この時点で、どの画面サイズでも、画面サイズ (px) の 1/15 px が 1rem に等しくなります。つまり、どのサイズの画面でも、要素に同じ rem 値が設定されている限り、その要素が占める画面幅の比率は、どのサイズの画面でも同じになります。比率が同じであれば、すべてのサイズの画面に適応されます。

コードが少ない

ここで、デザイン内の要素の px 単位を rem 単位に変換するだけです。

ですので、現時点ではデザイン案はある程度の大きさの携帯電話の画面とみなすことができます。
私の場合、デザインの幅は750pxです。

したがって、750/15 = 50px、つまり、デザイン案のサイズの携帯電話画面では、1rem = 50pxとなります。

次に、less コードで変数 @r を定義します。

div の幅は 100 px と測定されます。デザインドラフトのサイズの画面では、1rem = 50px なので、div の rem 値は 100/50 rem、つまり 100/@r になります。

div の高さは 200 px と測定されます。デザインドラフトのサイズの画面では、1rem = 50px なので、div の rem 値は 200/50 rem、つまり 200/@r になります。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: ウェブデザインの達人がよく使うレスポンシブフレームワークを共有する（要約）

>>: Windows で MySQL データベースを別のディスクに移動する