この記事では、CSS3に登場したvw、vh、vmin、およびvmaxユニットを紹介します。
ビューポートユニットとは
ビューポート単位は、ブラウザの表示領域のサイズの割合として計算される相対的な測定単位です。 これらのユニットは、
CSS仕様の3番目のバージョンに
登場しました。
測定単位vhおよびvw
vhと
vwは、
ビューポートの高さと
ビューポートの幅 （それぞれビューポートの高さと幅）としてデコードできます。
1vhはビューポートの高さの1％に相当し、
1vwはビューポートの幅の1％に相当します。
測定単位vminおよびvmax
vminおよび
vmaxは、
ビューポートの最小値と
ビューポートの最大 vmax表します。
1vminは
1vhと
1vw値を比較し、小さい方を選択します。
1vmaxは同じことを行いますが、2つの値のうち大きい方を選択します。 言い換えると、スマートフォンの画面幅が高さよりも小さい場合、
vminは幅を基準にして計算され、
vmaxは画面の高さを基準にして計算されます。
使用例
現在、フルスクリーンセクションの使用が増加しています。 特に、ランディングページで使用されます。 そのようなセクションを作成するには多くの方法がありますが、最も簡単でエレガントな方法は
vhユニットを使用することです。
section { height: 100vh; }
デモをご覧ください。
ブラウザのサポート
非常に多くのブラウザがこれらの測定単位をサポートしていますが、これは朗報です。 Chrome、Safari、Opera、Firefoxの最新バージョンに問題はありません。 IEは9番目のバージョンから部分的にサポートされています。 モバイルブラウザの問題：Opera Miniはこれらのユニットをまったくサポートしていません。Androidブラウザはバージョン4.4からのみサポートしています。
詳細な統計を表示します 。