vw、vh、パーセント単位

ビューポート単位とパーセントはどちらも「相対」に見えますが、異なる質問に答えます。

vw と vh

• 1vw = ビューポート幅の 1%
• 1vh = ビューポート高さの 1%

1440px 幅のビューポートでは：

.hero {
  padding-inline: 5vw; /* 72px */
}

ビューポート単位は次に有用です。

• fluid な水平 padding と gap
• 画面幅でスケールするフルブリードセクション
• clamp() と組み合わせたヒーロータイポグラフィ

注意点：

• モバイルブラウザ UI が実効ビューポート高さを変える
• 単独使用で非常に小さいビューポートで極端に小/大きな値
• アクセシビリティ：vw のみのテキストは狭い画面で小さくなりすぎる

パーセント単位

50% は包含ブロックに相対で、常にビューポートではありません。

.sidebar {
  width: 30%;
}

.card-title {
  font-size: 120%; /* 親 font-size に相対 */
}

パーセントは次に有用です。

• 既知のコンテナ内の列レイアウト
• 親幅を埋める画像とメディア
• ネストタイポグラフィのスケーリング

同じ % でも、プロパティ次第で親ボックスの幅か親テキストの font-size を意味します。

vw vs %

質問	より良い単位
画面幅全体でスケール	vw
親コンテナを埋める	%
最小/最大境界付きタイポグラフィ	rem + vw の clamp()
カード内グリッド列	% または fr 単位

ビューポート単位を境界と組み合わせる

一般的なレスポンシブパターン：

.section-title {
  font-size: clamp(1.25rem, 0.9rem + 1.5vw, 2rem);
}

本文テキストに生の vw だけはしばしば攻撃的すぎます。clamp() が最小と最大のガードレールを追加します。

要点

vw/vh はビューポートが参照のとき。% は親ボックスまたは親 font-size が参照のとき。タイポグラフィには clamp() で vw を rem と組み合わせます。

異なるビューポート幅で px 値が vw にどうマップするか CSS Unit Converter / Clamp Generator でプレビューしてください。