モバイル Web 画面適応の概要 (rem)-htmlチュートリアル-php.cn

モバイル Web 画面適応の概要 (rem)

不言

リリース： 2018-06-26 09:30:53

オリジナル

1852 人が閲覧しました

この記事では主にモバイルWeb画面適応(rem)について紹介します。モバイル Web スクリーンアダプテーション (rem) について詳しく紹介されています。非常に優れた内容なので、参考にさせていただきます。

はじめに

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

次に、モバイル Web 画面への適応 (レム) についての考えをいくつか記録します。

rem はじめに

rem は、ルート要素 () の 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 + &#39;px&#39;;
  })()
</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 サイトをご覧ください。