【CSS】vi・vbについて【単位】

どうも、くまだです。

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

今回はviとvbという単位についてのお話。

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

vi・vbについて

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

viとvbは、

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

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

<div class="box vi">vi</div>
<div class="box vb">vb</div>

.box {
  height: 80px;
}

.vi {
  width: 100vi;
  background: skyblue;
}

.vb {
  width: 100vb;
  background: orange;
}

100viを指定した場合の要素の横幅は、インライン方向に最初に含まれるブロックの大きさの100%になるので、375pxになります。

100vbを指定した場合の要素の横幅は、ブロック方向に最初に含まれるブロックの大きさの100%になるので、635pxになります。

1viと指定した場合、インライン方向に最初に含まれるブロックの大きさの1%になるので、3.75pxになります。

1vbと指定した場合、ブロック方向に最初に含まれるブロックの大きさの1%になるので、6.35pxになります。

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

100viを指定した場合の要素の横幅は、インライン方向に最初に含まれるブロックの大きさの100%になるので、2000pxになります。

100vbを指定した場合の要素の横幅は、ブロック方向に最初に含まれるブロックの大きさの100%になるので、635pxになります。

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