Viewport units (vw, vh, vmin, vmax)

概要

vw（ビューポート幅の1%）・vh（ビューポート高さの1%）・vmin（幅と高さの小さい方の1%）・vmax（大きい方の1%）で、ビューポートサイズに連動したレスポンシブな値を指定できる。フルスクリーンセクションや、画面サイズに比例するフォントサイズに利用される。

対応ブラウザ

基本構文

.hero {
  height: 100vh;
  width: 100vw;
}

.responsive-text {
  font-size: 5vmin;
}

.square {
  width: 50vmin;
  height: 50vmin;
}

実務での使いどころ

• フルスクリーンセクション

  height: 100vh でビューポート全体を覆うヒーローセクションを作成する。

• アスペクト比維持の要素

  vmin を使って、画面の向きに関わらず一定のサイズ比率を保つ要素を実現する。

注意点

アクセシビリティ

• vw でフォントサイズを指定するとユーザーのズーム操作で文字サイズが変わらない場合がある。rem と組み合わせて使用する。

参考リンク

• MDN Web Docs — Viewport units
• Can I use — Viewport units