[HTML & CSS General] いま rem (root em) units を使うべきその理由と使い方

ちょっと調べたのでまとめておく。

現在の状況

Internet Explorer のサポートポリシーにあわせてもらえる案件では、IE9+ 以上対応となったので rem (root em) units が利用できる。
なお、このサイトのアクセスログでは IE11 未満は 1% を切っている。
2016 年に制作するサイトは IE11+ にしていただきたいところ。

rem (root em) units

IE9+ で利用できる。
ただし IE9/10 では font shorthand property 内、および擬似要素内で利用できないとのこと。

rem は、<html> の font-size を基準とする値。

rem に至るまでの歴史的経緯

  • px … IE8 以下で文字サイズを変更できない問題。
  • em … 入れ子で複利計算問題。
  • rem … IE8 以下にも px の fall-back で対応。
html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

レスポンシブにも対応したフォントサイズの指定方法

IE8 以下の対応が外れたので、rem のみでさらに扱いやすくなった。

html { font-size: 62.5%; }
body { font-size: 1.6rem; }

文字サイズのディフォルト値

html { font-size: 62.5%; } で 10px 相当として扱えるようになるのは、ブラウザのディフォルト文字サイズが以下となっているため。

100% = 1em = 1rem = 16px = 12pt

root である html の値を変更することによって、すべてのサイズを変更できる。

@media screen and (min-width: 1280px) {
  html {
    font-size: 100%;
  }
}

例えば body { font-size: 16rem; }16px とした文字サイズを、別のブレークポイントで 20px にしたい場合、html { font-size: 78.125%; } を指定する。

20 / 1.6 * 6.25 = 78.125%

<html> に font-size を px 指定しない

pixel 値は、ユーザーのブラウザ設定で上書きされてしまうから。

font-size 以外を rem 指定すべきか

remem で長所・短所がそれぞれあるとのこと。

個人的には rem 指定で統一すると、ソースの見通しと設定が分かりやすく管理しやすいと感じている。
要研究。

補遺

文字サイズの指定にビューポートの単位を使う例。

rem の基準となる値を font-size ではなく line-height とした例。