Rem, em

4357 ワード
CSS テキストリンク

rem、em css要素


CSSの長さ単位では、emとremが相対的に大きい.

Em-親要素ベース


Em単位は、親要素の数倍のサイズでサイズを決定します.例:
font-size: 1.5em;
文字の大きさを上位要素の1.5倍に変更することを示します.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      html { font-size: 16px; }
      body { font-size: 1.5em; }
      .a { font-size: 2.0em; }
    </style>
  </head>
  <body>
    <p class="a">Lorem Ipsum Dolor</p>
  </body>
</html>
html要素のサイズは16 px、body要素のサイズは親要素html要素のサイズの1.5倍24 px、段落要素のサイズは親要素body要素のサイズの2倍48 pxです.
16 × 1.5 × 2 = 48

rem-html要素ベース


rem単位は、ドキュメントの最上位要素、すなわちhtml要素のサイズの数倍です.上記の例では、
.a { font-size: 2.0em; }
単位をremに変更すると
.a { font-size: 2.0rem; }
番号は32 pxです.
html要素のサイズは16 pxなので、その2倍32 pxです.
16 × 2 = 32
html要素と段落要素の間のbody要素の大きさは影響を受けません.

リファレンス

  • html要素サイズのデフォルト値は、Webブラウザ設定で指定された番号です.一般的に16 pxです.
    • ビューにフォントを変更
    2つの整数の和-プログラマ