CSSのvw, vhの違い

CSSのvw, vh, vmin, vmaxの違い

CSSをいじってる時にこの辺りがよく理解できていなかったのでまとめます。

vw

ビューポートの幅に対する割合。

.hoge {
  width: 50vw;
}

hogeクラスの幅を 50vw と指定しています。 基準のビューポートの幅を vw で表すと 100vw となります。 横幅が仮に100pxの場合は50vwはその1/2なので50pxになります。 （width指定なので横幅が）

vh

ビューポートの高さに対する割合

.hoge {
  height: 50vh;
}

hogeクラスの高さを 50vhと指定しています。 基準のビューポートの幅を vhで表すと 100vh となります。 横幅が仮に100pxの場合は50vhはその1/2なので50pxになります。 （height指定なので横幅が）