【レスポンシブ対応】CSSで使いたいvh/vwの単位について

以前Bootstrap3を使用したことがあるのですが、ファイルが重すぎてサイトの読み込みに影響が出るレベルだったので、それ以降Bootstrapからは距離を置いていました。
（いかにもBootstrapだ！というレイアウトデザインになってしまうのも理由の一つ）

ですが、最近フレームワークについて調べているとBootstrap4が既にリリースされていて、そのBootstrap4の評判が良いというではないですか！

そんなこんなでBootstrap4を試しにダウンロードしてみて中身を見てみると、見たことない単位を発見しました。

height: 100vh;
…vhって何ぞや？

vhとvwの意味は？

この単位はViewport（ビューポート）のサイズの単位です。

Viewport（ビューポート）というのは表示サイズのことを表していて、スマートフォンサイトやレスポンシブサイトでは重要な項目です。

vhはスクリーンの高さの単位（100分の1相当）
vwはスクリーンの幅の単位（100分の1相当）

Viewport、つまり今見ているスクリーンサイズでの割合指定が出来るということです。
これめちゃくちゃ便利じゃないですか…！（何で今まで知らなかったのか…）

例えば幅1000px、高さ900pxの場合、1vwは10px、1vhは9pxという計算になります。

近年ファーストビューにフルスクリーンのアイキャッチを見せるサイトが増えています。
動画や写真でサイトの印象を引き付けるポイントです。

そのフルスクリーン対応がvhを使うと簡単に出来てしまいます。

以前はjQueryでスクリーンの高さを取得する作業がありましたが…
heightにvhを指定してあげるだけではい、完了です。

どんなスクリーンサイズでも中央に配置したいことありませんか？（モーダルウィンドウなど）
それもこのCSSを使えば出来ちゃいます。

今までのpx（ピクセル）指定ではメディアクエリでスクリーンサイズごとにフォントサイズをいちいち指定していました。が、vwを使用すれば1回の記述でスクリーンごとに割合を変えてくれます。

ほとんどのブラウザでは対応済のようですが、古いバージョンやIE、Operaは完全サポートではないようです。（Opera使ってる人みたことないけど…）
https://caniuse.com/#search=vh

皆さんもぜひ試してみてください！