相対的な幅を指定する

CSSの幅を指定する際に、画面幅に応じて可変な幅を指定することができる。例えば、width: 50%と指定すると、要素の幅は親要素の幅の50%になる。

.element {
  width: 50%;
}

ルート要素のフォントサイズを基準にした幅を指定する

CSSの幅を指定する際に、ルート要素のフォントサイズを基準にした幅を指定することもできる。例えば、width: 10remと指定すると、要素の幅はルート要素のフォントサイズの10倍になる。

.element {
  width: 10rem;
}

ビューポートの幅を基準にした幅を指定する

CSSの幅を指定する際に、ビューポートの幅を基準にした幅を指定することもできる。例えば、width: 50vwと指定すると、要素の幅はビューポートの幅の50%になる。

.element {
  width: 50vw;
}

ルート要素のフォントサイズをビューポート基準で指定する

CSSの幅を指定する際に、ルート要素のフォントサイズをビューポート基準で指定することもできる。例えば、font-size: calc(100vw * 16 / 375)と指定すると、ルート要素のフォントサイズはビューポートの幅が375pxのときに16pxになる。

この状態で要素サイズや余白、位置などにrem単位を使用して指定すると、ビューポートの幅に応じて可変な幅を指定することができる。

html {
  /* ビューポートの幅が375pxのときに16px */
  font-size: calc(100vw * 16 / 375);
}

.element {
  /* ビューポートの幅が375pxのときに160px */
  width: 10rem;
}