CSSビューポートユニットvw、vh、vmin、vmaxのガイド

ビューポートパーセンテージ長, または ビューポートユニット それらがより頻繁に呼ばれるように、あなたがディメンションを定義することを可能にする敏感なCSSユニットです ビューポートの幅または長さのパーセンテージとして. ビューポート単位は、パーセンテージなどの他のレスポンシブCSS単位が 仕事がしにくい.

が W3Cのドキュメント ビューポートユニットでは理論に入れることができるすべてが含まれています、それはあまり冗長ではありません。それで、この記事では、これらのCSSユニットがどのようにしているのかを見ていきます。 実際に働く.

ビューポートの高さ（VH）＆ビューポート幅（vw）

W3C ビューポートを定義します として “初期包含ブロックのサイズ”. 言い換えれば、ビューポートは面積です。 ブラウザウィンドウ内に含まれている または画面上の他の表示領域.

の vw そして VH 単位 実際のビューポートの幅と高さの割合を表します。彼らは値を取ることができます 0から100まで 以下の規則に従って。

 100vw =ビューポート幅の100％1vw =ビューポート幅の1％100vh =ビューポート高さの100％1vh =ビューポート高さの1％ 

パーセント単位との違い

それでは、ビューポートの単位はパーセントの単位とどう違うのでしょうか。パーセント単位 親要素のサイズを継承 ビューポートユニットは違いますが。ビューポートの単位は常に次のように計算されます。 ビューポートサイズの割合. 結果として、ビューポートユニットによって定義された要素は、その親のサイズを超えることができます。.

例：全画面セクション

全画面セクション おそらく最も広く知られているビューポートユニットのユースケースです。.

の HTMLはとても単純です;私たちはただ 上下に3つのセクション そして私達はそれらのそれぞれにしてほしい 画面全体を覆う （それ以上ではありません）.

CSSでは、 100vh として 高さ 値と 100％ として 幅. 私達は使いません vw デフォルトではここの単位, スクロールバーも追加されています ビューポートサイズに。だから、私たちが使用した場合 幅：100VW。 ルールA 水平スクロールバー に表示されます ブラウザウィンドウの下部.

 * マージン：0;パディング：０。セクション背景サイズ：表紙;背景位置：中央。幅：100％。高さ：100vh。セクション-1 背景画像：URL（ 'https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg'）;セクション2 background-image：url（ 'https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg'）;セクション3 background-image：url（ 'https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg'）;  

下記のGIFデモでは、それを見ることができます VH です 本当にレスポンシブユニット.

W3Cの文書によると、前述の 水平スクロールバーの問題 を追加することによって解決することができます オーバーフロー：auto。 ルート要素へのルール。この解決策 部分的にしか機能しない, しかし。確かに、水平スクロールバーは消えますが 幅 です それでもビューポート幅に基づいて計算されます （サイドバーが含まれています）.

私は言うだろう、私はあえて使用しないだろう vw ユニットオン フルスクリーン要素のサイズ変更 このためです。私たちはそれを必要とさえしていません。 幅：100％。 ルールは完璧に機能します。フルスクリーンレイアウトでは、実際の課題は常に次のようになります。 適切な高さの値を設定してください そしてその VH ユニットはそのための素晴らしい解決策を提供します.

その他のユースケース

興味のある方 他のユースケース vw そして VH Lullabotには、 実例のほんの一握り （Codepenデモ付き）

• 固定比率カード.
• 画面より要素を短くする.
• スケーリングテキスト.
• コンテナからの脱出.

Opera.devには、あなたがどのようにしてこれらを利用することができるかについての短いチュートリアルもあります。 vw ユニットイン レスポンシブタイポグラフィの作成.

あなただけのビューポートユニットを使用することはできません 幅 そして 高さ 他のどのプロパティでも。例えば、 余白と余白のサイズを設定する を使用して vw そして VH 単位も.

ビューポート分（vmin）＆ビューポート最大（vmax）

の vmin そして vmax ユニットにアクセスすることができます 小さい方または大きい方のサイズ 次の規則に従って、ビューポートの

 100vmin = 100vwまたは100vh、小さい方1vmin = 1vwまたは1vh、小さい方100vmax = 100vwまたは100vh、大きい方1vmax = 1vwまたは1vh、大きい方 

だから、の場合 縦向き, 100vmin 等しい 100vw, ビューポートは 垂直よりも水平に小さい. 同じ理由で, 100vmax に等しい 100vh.

同様に、 横向き, 100vmin 等しい 100vh, ビューポートは 水平よりも垂直方向に小さい. そしてもちろん, 100vmax に等しい 100vw ここに.

例：すべての画面で主人公のテキストを読みやすくする

の vmin そして vmax 単位はそれほど広く知られていない vw そして VH. しかし、彼らは優れたとして使用することができます オリエンテーションの代わり @メディア 問い合わせ. 例えば, vmin そして vmax あなたは奇妙に見えるかもしれない要素があるときに便利になることができます 異なるアスペクト比で.

New Codeには、あなたがどのようにできるかを彼らが議論する素晴らしいチュートリアルがあります。 ヒーローテキストを読みやすくする を使用して、すべての画面で vmin 単位。英雄のテキストは見やすい 携帯電話では小さすぎ、大型モニターでは大きすぎる.

これが彼らの解決策の主な考え方です。

 h1 フォントサイズ：20vmin;フォントファミリー：Avenir、サンセリフ。フォントウェイト：900。 text-align：center。  

Codepenデモでは、どのようにチェックアウトすることができます vmin 英雄テキストの読みやすさの問題を解決します。にアクセスする “全ページ” Codepenを見て ブラウザウィンドウのサイズを変更する ヒーローのテキストがどのように変化するかを見るために水平方向と垂直方向の両方に.

ブラウザサポート

下のCanIUseチャートでわかるように, ブラウザのサポートは比較的良いです ビューポートユニット用。ただし、IEとEdgeの一部のバージョンはサポートしていないことに注意してください。 vmax. また、iOS 6と7には問題があります。 VH 単位, これはiOS 8で修正されました.