vw, vh, vm(vmin)という単位についての覚え書き

公開：2011年12月19日 15:37

「CSS Values and Units Module Level 3」のViewport-relative lengths（または Viewport-percentage lengths）についての覚え書きです。
これは新しく追加された長さの単位です。

上は2011年9月6日版のWorking Draftの仕様へのリンクで、下がEditor’s Draftの最新版へのリンクです。
Editor’s Draftの方は2011年12月13日版を参考にしていますが、ページが見つからないので最新版へのリンクにしてあります。

各単位は次のようになっています。
WDは2011年9月6日版のWorking Draftを、EDは2011年12月13日版Editor’s Draftを指します。

これらは初期包含ブロックのサイズを基準にしています。
ビューポートの高さまたは幅が変更されたとき、それに応じてスケーリングされます。

vw: WD: 初期包含ブロックのwidthの1/100に等しい。
ED: 初期包含ブロックのwidthの1%に等しい。
vh: WD: 初期包含ブロックのheightの1/100に等しい。
ED: 初期包含ブロックのheightの1%に等しい。
WD: vm / ED: vmin: vwまたはvhの小さい方に等しい。

たとえば、初期包含ブロックの幅が1000pxの場合、1vwは10pxと同じ意味になります。
初期包含ブロックの高さが500pxの場合には1vhは5pxと同じ。
初期包含ブロックの幅が1000pxで幅が500pxの場合、1vm (1vmin)は5pxです。

2011年12月現在、この単位に対応しているブラウザ（安定版）はInternet Explorer 9だけです。
とりあえず、簡単なサンプルを作ってみましたのでご確認ください。
表示領域のサイズを変更してリロードすると分かると思います。

vw, vh, vm(vmin) Sample

サンプルをダウンロード

このサンプルにはLea Verou作のpolyfillをdrublicがForkしたものを使っています。
なので、一応IE9以外でもそれっぽく見れると思います。
また、画面サイズの表示には「Window Size bookmarklet to test/debug CSS3 Media Queries」を使っています。
テキストは「Cupcake Ipsum」で生成したものです。

HTMLとCSSは次のようになっています。CSSは関係ない部分は省略しています。

<section>
  <h1>CSS3 vw, vh, vm(vmin) Sample</h1>
  <p>...</p>
  <p>...</p>
</section>

html {
  overflow: hidden;
}

body {
  margin   : 0;
  padding  : 0;
  font-size: 100%;
}

section {
  margin    : 5vh 5vw;
  padding   : 1vh 1vw;
  width     : 90vw;
  height    : 90vh;
  box-sizing: border-box;
  overflow  : auto;
}

h1 {
  font-size  : 20px;
  font-weight: normal;
}

p {
  font-size: 10px;
}

@media screen and (min-width: 500px) {

  h1 {
    font-size: 4vw;
  }

  p {
    font-size: 2vw;
  }

}

@media screen and (min-width: 2000px) {

  h1 {
    font-size: 80px;
  }

  p {
    font-size: 40px;
  }

}

section部分のwidth: 90vwとheight: 90vhの指定により、このブロックは必ず表示領域内に収まるようになっています。

h1とpのフォントサイズの指定ですが、普通にvwを使ったのでは表示領域が小さいときに文字が小さすぎて読めなくなってしまうので、まず最低ラインを決めておきます。
次に、表示領域の幅が500px以上の場合の指定でvwを使い、常に表示領域に対して相対的なサイズで文字が表示されるようにします。
最後は小さいときの逆で、最大値を設定しておきます。

レイアウトなどに使うときはあまり気にしなくてもいいかもしれませんが、フォントサイズなどに使う場合にはMedia Queriesを使って最大値と最小値を指定しておかないと非常に読みづらいページになってしまう可能性があるので、そこらへんは気をつけたほうがいいかなーと思います。

ただ、この単位のいい使いどころがまだよく分からないので（対応ブラウザも少ないですし）、しばらく使うことはなさそうです。
Snook.caの人はLightboxや画像に使うといいんじゃないかと書いていました。

あと、ちょっと気になってることが。
Editor’s Draftではvmがvminに変更されているみたいですが、このままvminが正式に決定して、いつかこの単位を普通に使うようになったときにIE9が現役だと、IE9用にvmも書く必要が出てくるんじゃないかなーと。
まあそのくらい上手く調整しろって言われればそれまでなんですけどね……。

最後に。
こういう記事ではいつも書いていることですが、この記事で書いたものは決定した仕様ではありません。今後変更される可能性もありますのでお気をつけください。