rem と em はいつ使い分けるべきですか？

rem はルートフォントサイズに対する相対値で、マージン、パディング、レイアウトなど一貫性が必要な場面に適しています。em は親要素のフォントサイズに対する相対値で、コンポーネント内で親に連動してスケールするネストされたフォントサイズに適しています。

ビューポート単位（vw、vh）の仕組みは？

1vw はビューポート幅の 1%、1vh はビューポート高さの 1% に相当します。ブラウザウィンドウサイズに適応する全幅・全高レイアウトに便利です。

パーセントは包含要素と具体的な CSS プロパティに依存するため、汎用的な変換係数がありません。このツールは固定された予測可能な変換基準を持つ単位のみをサポートしています。

ルートフォントサイズ (px)

親フォントサイズ (px)

幅 (px)

高さ (px)

精度

CSS 単位変換ツールは、px、rem、em、vw、vh、vmin、vmax 間の相互変換をサポートする無料オンラインツールです。ルートフォントサイズとビューポート寸法をカスタマイズでき、CSS コードの一括変換も可能。完全にブラウザで動作します。

CSS 単位変換ツールを使うと、px、rem、em、vw、vh、vmin、vmax などの CSS 長さ単位を即座に変換できます。ルートフォントサイズ、親フォントサイズ、ビューポート寸法を設定して正確な変換結果を取得できます。

CSS コードを貼り付けて一括変換するか、参照テーブルで一般的な px→rem、px→vw の対応値を確認できます。