【CSS】vmin・vmaxについて【単位】

どうも、くまだです。

最近、コーディングでさまざまな単位に出会います。

今回はvminとvmaxという単位についてのお話。

LPデザインのお仕事募集中です↓↓↓

vmin・vmaxについて

vwやvh、vminとvmaxはビューポートの幅や高さに対する割合で要素のサイズを指定します。

vwやvhの場合は、

対してvminとvmaxは、

例えば、以下のような場合。

画面幅が横幅が375px、縦の高さが524pxのとき。

  <div class="box vmin">vmin</div>
  <div class="box vmax">vmax</div>

.vmin {
  width: 100vmin;
  height: 50px;
  background: orange;

}

.vmax {
  width: 100vmax;
  height: 50px;
  background: skyblue;
}

100vminを指定した場合の要素の横幅は、画面幅縦横のうち短いほう（この場合、画面横幅375px）の100%なので375pxの長さになります。

100vmaxを指定した場合の要素の横幅は、画面幅縦横のうち長いほう（この場合、画面高さ524px）の100%なので524pxの長さになります。

1vminと指定した場合、画面幅縦横のうち短いほう（この場合、画面横幅375px）の1%なので3.75pxの長さになります。

1vmaxと指定した場合、画面幅縦横のうち長いほう（この場合、画面高さ524px）の1%なので5.24pxの長さになります。

仮に画面幅が横長の場合（例：横幅2000px、縦の高さ524px）にした状態で、それぞれ100vminと100vmaxと指定したとします。

100vminを指定した場合の要素の横幅は、画面幅縦横のうち短いほう（この場合、画面高さ524px）の100%なので524pxの長さになります。

100vmaxを指定した場合の要素の横幅は、画面幅縦横のうち長いほう（この場合、画面横幅2000px）の100%なので2000pxの長さになります。

要するに、

となります。

ここまで読んでくださりありがとうございました。