cssのfont-sizeの単位は一体どれを使うべきだろうか

新入社員のshuです。 今回はよく使う単位、px,em,rem,vwの選択について述べていきたいと思います。

px

誰もが使用したことのある絶対指定の単位。
スクリーンの1ピクセルの長さを1とした単位。

vw

画面の横幅全体を「100vw」とみなし、それに対する割合として計算されます。 例えば、 font-size: 5vw
は画面幅320pxの場合、16px。 画面幅640pxの場合、32pxになります。

em

相対指定の単位。親要素の文字サイズに基づいて算出されます。
親要素の文字サイズが20pxのとき、1(em)=20(px)
と定義され、
子要素の文字サイズが0.8emなら 20(px)*0.8=16(px) と計算されます。
デメリットは、emで指定された要素の親要素もemで指定した場合、計算がややこしくなることです。　　

rem

ルート(html)要素の文字サイズに基づいて算出されます。
大抵、ブラウザのデフォルトの文字サイズは16pxなので、
10/16=0.625より

html {
font-size: 62.5%
}

とし、1remを10pxに等しくし 、計算を楽にする小技を使います。

html {
font-size: 6.25%
}

とすれば1remが1pxに等しくなるのでこちらの方が一見、合理的に思えますが、
これはブラウザの設定で「最小フォントサイズ」が設定されていたときにレイアウト崩れを起こします。

font-sizeの相対指定をする必要性

現在の状況を鑑みれば、相対指定は必ずしも必要ではないと思われます。

1.レスポンシブ対応にするのに必要?

css3で導入されたmedia queriesを使えば必ずしも必要とは言えません。

2.拡大・縮小できない?

IEでさえ、IE10以降では問題なく拡縮できます。