Chrome Canaryが新しいCSSユニット-vh、vw、vminを発売

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éの記事 。