CSSにおけるvwとvhの単位
単位vwとvhは、ブラウザウィンドウのビューポート領域を基準にサイズを指定することができます。例を見てみましょう。
以下のようなdiv要素があるとします：
<div></div>
このdivの幅をビューポート幅の半分、高さをビューポート高さの半分に設定してみましょう：
div {
width: 50vw;
height: 50vh;
margin: 30px auto;
border: 1px solid red;
}
結果を見てみましょう：
以下のdiv要素があります。この要素の上マージンをビューポート高さの30%に設定してください。
以下のdiv要素があります。この要素の幅と高さをビューポート幅の70%に設定してください。
