BinaryDevelop
  1. ホーム
  2. Web制作
  3. HTML/Xhtml

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

2022-01-08 19:51:15

前文

最近、以前フロントエンドを勉強したときのメモを整理したところ、モバイルWeb側の画面適応（rem）をよく理解せず、ただ使っていただけだったことに気づきました。

次に、モバイルウェブの画面適応（rem）について、私の考えを書いておきます。

remの紹介

remはルート要素(<html>)のfont-sizeの大きさを表します。つまり、ルート要素のfont-sizeが14pxであれば、1rem = 14px

モバイルウェブ用レム

適応効果

同じ要素でも画面サイズが異なると同じ大きさに見えないが、画面幅に占める割合は同じである。

コード 

// In the head tag of the html file
<script type="text/javascript">
  (function(){
    var html = document.documentElement;
    // Get the screen width (px)
    var hWidth = html.getBoundingClientRect().width;
    // Set the font-size of the html tag to hWidth/15
    html.style.fontSize = hWidth/15 + 'px';
  })()
</script>


// In less
/* Define the variable @r:750/15 */
@r:50rem; 
div {
  width: 100/@r;
  height: 200/@r;
}

javascriptコード

まず、画面サイズの15分の1（px）をhtmlタグのfont-size属性にコピーします。このとき、画面サイズ（px）の1/15pxは、どのサイズの画面でも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となります。

以上が今回の記事の全てですが、皆様の勉強のお役に立てれば幸いです。また、スクリプトハウスを応援していただければ幸いです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します