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

CSS Values and Units Module Level 3 – 5.1.2. Viewport-relative lengths

CSS Values and Units Module Level 3 – 5.1.2. 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 も書く必要が出てくるんじゃないかなーと。
まあそのくらい上手く調整しろって言われればそれまでなんですけどね……。

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