多くの場合、レイアウトには、ブラウザのビューポートに収まることが保証されている要素があります。 一般的に、これにはJavaScriptが使用されます。 ビューポートのサイズを確認し、それに応じて要素のサイズを変更します。 ユーザーがブラウザウィンドウのサイズを変更すると、手順が繰り返されます。
vw / vhを使用すると、ビューポートのサイズを基準にして要素のサイズを設定できます。 単位vw / vhは、1vwがビューポートの幅の1/100に等しい単位であるという点で興味深いです。 たとえば、ビューポートの幅に等しい幅を要素に割り当てるには、幅を100vwに設定します。
使い方
ライトボックスはvwとvhを使用するのに最適な候補です。これは通常、ビューポートに対して配置されるためです。ただし、高さと幅をまったく設定できないため、上、下、左、右の値で固定する方が使いやすいようです 。
新しい単位を使用して、通常のフローにある要素のサイズを設定できます。 たとえば、スクリーンショットをページに配置できます。 これらのスクリーンショットの高さは、ビューポートの高さを超えないようにしてください。 これを行うには、画像の最大の高さを設定できます。
img { max-height:95vh; }
この場合、高さを95vhに設定して、画面上に小さなスペースを残します。
ブラウザのサポート
IE9を含むほとんどすべての主要なブラウザーでremがサポートされている場合、vwとvhを使用するのは待つ価値があります。 現時点では、Internet Explorer 9のみがそれらをサポートしています。
参照資料
Eng 仕様
VM単位
gd666のアドバイスに基づいて、少し追加することにしました。
元の記事で言及されていない別のビューポートユニットがあります。 これはvmです。
vmは、ビューポートの幅または高さのいずれか小さい方に対して計算されます。 小さい方の値は100 vmです。 ビューポートのサイズを変更すると、それに応じてvmで指定された寸法が変更されます。
それについては仕様書で読むことができます。 eng