Widely available 安心して使用可能。すべての主要ブラウザで長年サポートされている。

Viewport units (vw, vh, vmin, vmax)

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

ユニットレスポンシブ

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.length.vh
20
12
19
6
25
6
CSS タイプ
vmax

「vmax」ユニット
26
16
19
7
26
7
vmin

`vmin` ユニット
26
12
19
7
26
7
vw

「vw」ユニット
20
12
19
6
25
6
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • バージョン 21 以降、ビューポートのパーセンテージの長さは `@page` では無効になります。
注釈 1件
実装メモ
  • バージョン 21 以降、ビューポートのパーセンテージの長さは `@page` では無効になります。
注釈 1件
対応条件
  • 以前は別名で対応していました: vm (12)
注釈 1件
実装メモ
  • バージョン 21 以降、ビューポートのパーセンテージの長さは `@page` では無効になります。
注釈 1件
実装メモ
  • バージョン 21 以降、ビューポートのパーセンテージの長さは `@page` では無効になります。

基本構文

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

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

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

ライブデモ

vw / vh

Viewport units (vw, vh, vmin, vmax) Vw / vh demo.

プレビュー全画面表示

Vmin(smallside)

Viewport units (vw, vh, vmin, vmax) Vmin(smallside) demo.

プレビュー全画面表示

Responsivecharacter

Viewport units (vw, vh, vmin, vmax) Responsivecharacter demo.

プレビュー全画面表示

実務での使いどころ

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

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

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

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

注意点

  • モバイルブラウザではアドレスバーの表示/非表示により100vhの実際の高さが変動する。svh/dvh/lvh の使用を検討。
  • vh をフォントサイズに使うと予想外に大きく/小さくなる場合がある。clamp() と併用を推奨。

アクセシビリティ

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

参考リンク