今回は、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%;
    }
}

とすれば良いのです。