Google Chromeの開発者向けバージョン(この記事の執筆時点-Chrome 20)では、数か月前にWebkitエンジンに
実装されたvh、vw、vminの新しいCSS単位のサポートが導入
されました。 それ以前は、Internet Explorer 9および10バージョンでのみ機能していました。 これらの
単位は、ウィンドウの高さまたは幅に対するオブジェクトのサイズを指定します。 パーセンテージとは異なり、これらは常に現在のブロックのコンテナではなく、ブラウザウィンドウに正確に関連付けられます。
1vh
はウィンドウの高さの1%、
1vmin
は幅の1%、
1vmin
はこれら2つの値のうち小さい方です。
例:
h1 { font-size: 4.2vw; } header { height: 15vh; } #someDiv { padding: 2vmin; }
使用の特徴
ブラウザウィンドウのサイズを変更すると、vh、vw、vminで指定されたブロック要素のサイズがリアルタイムで変更され、フォントサイズは再描画後にのみ変更されます。 スケールを変更すると(Ctrl +またはCtrl-)、フォントサイズは変わりますが、ブロックサイズは変わりません。 Internet Explorerの動作はまったく同じです。
IEでは、「vmin」の代わりに「vm」という名前が使用されます(これらのユニットのサポートは、かなり前にIEに登場しましたが、W3C仕様では「vmin」ではなく「vm」でした)。
IEとは異なり、Chrome Canaryはまだborderプロパティの新しいユニットを理解していません。
件名内のリンク:
CSS Tricksの 記事、Habréの記事 。