はじめに
フォントサイズ指定の単位っていくつか指定方法あるけどいつまで経っても覚えられないから自分用にメモすることにしました。
px(ピクセル)
絶対値の単位。ピクセル単位は固定されており、他の要素のサイズには依存しません。
例えば、font-size: 16px;と指定すると、16ピクセルのサイズでテキストが表示されます。
画面のサイズが変わってもずっと16pxです。
rem(ルートエム)
親要素のフォントサイズを基準に倍々する。
ルートエムという単位で、基準となるルート要素(通常は<html>
要素)のフォントサイズに対する倍率でフォントサイズを指定します。
例えば、font-size: 1.2rem;
と指定すると、ルート要素のフォントサイズの1.2倍のサイズでテキストが表示されます。
ルート要素のフォントサイズを変更すれば、その倍率に応じて全体のフォントサイズも変わります。
em(エム)
親要素のフォントサイズを基準に倍々する。
エムという単位で、現在の要素のフォントサイズに対する倍率でフォントサイズを指定します。
例えば、font-size: 1.2em;
と指定すると、現在の要素のフォントサイズの1.2倍のサイズでテキストが表示されます。
親要素のフォントサイズを変更すれば、その倍率に応じて子要素のフォントサイズも変わります。
%(パーセント)
パーセントという単位で、現在の要素の親要素に対するフォントサイズのパーセンテージでフォントサイズを指定します。
例えば、font-size: 80%;
と指定すると、親要素のフォントサイズの80%のサイズでテキストが表示されます。
親要素のフォントサイズを変更すれば、そのパーセンテージに応じて子要素のフォントサイズも変わります。