CSS単位の使い分け — px・rem・em・vw・vh・pt・cm・mm
CSSには多くの長さの単位があり、それぞれ異なる基準で計算されます。適切な単位を選ぶことでレスポンシブ対応・アクセシビリティ・保守性が大きく改善します。
px（ピクセル）とremの違い
pxはデバイスピクセルを基準とした絶対単位です。ブラウザのフォントサイズ設定を変更してもpxは変わりません。remはrootのem、つまりhtmlタグのfont-sizeを基準にした相対単位です。多くのブラウザのデフォルトは16pxなので1rem=16pxですが、ユーザーがブラウザのフォントサイズを変更するとremも変わります。アクセシビリティの観点からfont-sizeにはpxよりremが推奨されます。
emとremの使い分け
emは現在の要素のfont-sizeを基準にした相対単位です。1.5emは「現在のフォントサイズの1.5倍」を意味します。ネストが深くなると基準が変わって計算が複雑になりますが、コンポーネント内でフォントサイズに比例した余白を設定するpadding: 0.5emのような使い方では有効です。見出しのline-heightなどにemを使うと直感的です。
vw・vhの使いどころ
vwはビューポート幅の1%、vhはビューポート高さの1%を表します。100vhで全画面高さのヒーローセクション、50vwで画面の半分の幅、など大きなレイアウトに使います。ただしモバイルのアドレスバーの表示/非表示でvhが変動する問題がありsvh・dvhなどの新しい単位も登場しています。
pt・cm・mmは印刷向け
pt（ポイント）・cm・mmは印刷・PDF生成向けの単位で、画面表示では使いません。Webコンテンツでは基本的にpx・rem・em・vw/vhを使い分けます。CSS Unit Converterではこれらすべての単位を相互変換でき、ベースフォントサイズとビューポートサイズをカスタマイズして正確なrem/vwの換算値を確認できます。