サイズ指定の単位

• 絶対的指定
• px
Webページを閲覧する環境（OSやブラウザ）が変わろうとも、指定されたサイズで固定表示されます。そのため、場合によっては表示が小さすぎたり大きすぎたりすることがあります。

• 相対値指定
ある基準をもとに倍にするとか半分にするといった相対的な書き方をします。環境に応じた基準をもとに表示されるため、どんな環境でも適切な大きさで表示されるという違いがあります。スマートフォンで閲覧した場合にはそれに適した大きさで表示され、PCで閲覧した場合にはそれに適した大きさで表示されます。ここでは3つの単位をご紹介します。3つの単位の違いは基準です。
• em
基準は親要素のfont-sizeです。親要素のfont-sizeは、その時のスタイルシートの設定など状況によって異なります。
• rem
基準はルート要素のfont-sizeです。remの頭のrはルートのrです。ルート要素とはhtml要素のことです。Google Chromeのデフォルトスタイルシートでは、16pxに設定されています。
emは、基準を直近の要素においている。remは、基準をそのドキュメントに置いている。と捉えることもできるかと思います。
• %
指定するプロパティによって基準が変わります。予期せぬ結果になることがありますので、注意が必要です。例えば、font-sizeの場合は親要素のfont-sizeが基準になります。marginやpaddingの場合は、親要素の幅（width）が基準となります。line-heightのような行の高さを指定するプロパティの場合、自要素（自分自身）のfont-sizeが基準になります。また、場合によってはブラウザによっても結果が変わることがあり得ますので、要注意です。