remでフォントサイズ指定

CSS3から新しく追加された「rem (root em)」という単位で、フォントサイズを指定するのが便利です。

従来の%やemは、親要素を基準にサイズが計算されます。なので、入れ子にすると親要素の影響をうけて、サイズが分かりづらくなってしまいます。

<div class="text01">
    親要素のテキスト
    <div class="text02">
        子要素のテキスト
    </div>
</div>

html{
font-size: 10px;
}
.text01{
font-size: 1.2em; /* 10px*1.2=12px */
}
.text02{
font-size: 1.2em; /* 12px*1.2=14.4px */
}

それに対しremはroot要素（html）のフォントサイズを基準にサイズが計算されるので、管理が楽でサイズもわかりやすいです。

html{
font-size: 10px;
}
.text01{
font-size: 1.2rem; /* 10px*1.2=12px */
}
.text02{
font-size: 1.2rem; /* 12px*1.2=12px */
}

基準となるhtmlに、font-size: 10px;を設定する*1と、1.2rem=12pxといった感じで直感的に対応できます。

remを使用するときhtmlのfont-sizeは、%で記述するのが一般的らしいです。*2
主要ブラウザのデフォルトフォントサイズは16pxなので、

html{
font-size: 62.5%; /* 16px*0.625=10 */
}

と、指定することで10pxになります。

IE8以下がサポート外。
最初に「px」を指定、その後に「rem」を上書きすることで対応できます。

.text01{
font-size: 12px; /* IE対応 */
font-size: 1.2rem;
}

ただ、IE8はサポート終了しましたね。

Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft

*1:bodyではなくhtmlに設定。注意。

*2:ブラウザやデバイスの対応の柔軟性も鑑みて

別冊webメモ