今回は、font-size によく使われる rem という単位について紹介します。
レスポンシブル対応には欠かせない単位になりますので、ぜひ理解して使いましょう。
rem とは
rem というのは root em の略になります。
すなわち、root のフォントサイズを 1rem とする単位です。
root とは html のことですので、html 要素のフォントサイズが 1rem になります。
例えば、html 要素のフォントサイズが「16px」のときは、1rem = 16px, 2rem = 32px, 3rem = 48px … となります。
html 要素のフォントサイズから相対的にサイズ指定できるのが rem になります。
rem を使うときは
主要なブラウザのデフォルトの文字サイズは 16px なので、そのまま rem を利用すると、
10px = 10 / 16 rem = 0.625 rem
12px = 12 / 16 rem = 0.75 rem
24px = 24 / 16 rem – 1.5 rem
と、キリの悪い数字で設定しにくいので、
あらかじめ
html { font-size: 62.5%; }
と、ルート要素(html要素)のフォントサイズを10pxにしておきます。
これで、
10px = 16 / 10 rem = 1.6 rem
12px = 12 / 10 rem = 1.2 rem
24px = 24 / 10 rem – 2.4 rem
と、わかりやすくなります。
rem の使いかた(レスポンシブル対応)
rem は、レスポンシブル対応にとても適しています。
例えば、
720pxのスマートフォンなどの 720px では 62.5%
それ以上のサイズの時は 1.2 倍に拡大したいときは
html { font-size: 62.5%; } @media screen and (max-width: 720px) { html { font-size: 75%; } }
とすれば良いのです。