通常 CSS で要素の幅や高さを指定する際は px や % といった単位が一般的に使われますが、最近のブラウザでは、この他に vw、vh、vmin、vmax という単位がサポートされています。
Viewport パーセンテージ
「vw」の「v」は「Viewport」の頭文字で、それぞれ以下のような意味を持っています。
| vw | viewport width | ビューポートの幅に対する割合 |
|---|---|---|
| vh | viewport height | ビューポートの高さに対する割合 |
| vmin | viewport minimum | ビューポートの幅と高さのうち、値が小さい方に対する割合 |
| vmax | viewport max | ビューポートの幅と高さのうち、値が大きい方に対する割合 |
基準となる値は「100vw ・ 100vh」で、それぞれビューポート 100% と同等の値になります。
例として以下の様な構造の HTML マークアップがあったとします。
<body> <img src="images/thumbnail.gng" width="100px" height="100px" /> </body>
img {
display:inline-block;
margin:auto;
width:10vw;
}
元の画像のサイズは 100px × 100px ですが、CSS 側で「10vw」と指定しています。
ここでは仮に iPhone 5S でレンダリングするとして、ビューポート幅をピクセルで表すと 320px になりますが、10vw はその 1/10 ということで、「32px」が img の幅となります。
つまり 1vw、1vh はそれぞれ 1% と同じ長さになります。もちろんリキッドレイアウトにも対応して可変します。
「%」を使わない理由は？
画像の幅をビューポートの幅に対する割合で指定するのであれば、確かに % で事足ります。しかし 「%」の場合は対象となる要素のプロパティが親要素のそれと紐付けられるため、必ずしもビューポートの幅が基準になるとは限りません。もし画像が div といったコンテナ要素の中にあれば、そのコンテナ要素の幅に対する割合で計算されます。
さらに width は必ず親要素の width に対する割合で計算され、height は親要素の height に対する割合で計算されます。
vw、vh にはそのようなプロパティの紐付けがないため、以下のように記述すれば、画像の幅をビューポートの高さを元にした長さに指定するといった複雑な設定も簡単にできます。
img {
display: inline-block;
margin: auto;
width: 10vh;
}
このケースではビューポートの縦幅が 640px だとしたら、画像の横幅は 64px になります。
画像を例にすれば、ページ全体に敷き詰める背景画像などでの応用に使うことができます。
またモバイル端末で、向きによって縦横の長さが変わるので、JavaScript で向きの判定をして動的にサイズを調整するといった処理も不要になるでしょう。
対応ブラウザ
| vw, vh | vmin | vmax | |
|---|---|---|---|
| Chrome | v20.0 ~ | v20.0 ~ | v26.0 ~ |
| FireFox | v19.0 ~ | v19.0 ~ | v19.0 ~ |
| Internet Explorer | v9.0 ~ | v9.0 ~ | v11.0 ~ |
| Opera | v15.0 ~ | v15.0 ~ | v15.0 ~ |
| Safari | v6.0 ~ | v6.0 ~ | v6.1 ~ |
| Android Brower | v4.4 ~ | v4.4 ~ | v4.4 ~ |
| iOS Safari | v6.0 ~ | v6.1 ~ | v7.0 ~ |
2014年7月時点。現在の最新ブラウザであれば、vmaxを含め全ての機能が使えるようです。しかし Android Browser に関しては、v4.4からでないと機能しないようなので注意が必要です。
