[HTML & CSS General] いま rem (root em) units を使うべきその理由と使い方
ちょっと調べたのでまとめておく。
Contents
現在の状況
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 指定すべきか
rem と em で長所・短所がそれぞれあるとのこと。
個人的には rem 指定で統一すると、ソースの見通しと設定が分かりやすく管理しやすいと感じている。
要研究。
補遺
文字サイズの指定にビューポートの単位を使う例。
rem の基準となる値を font-size ではなく line-height とした例。