スタイルで指定する値の最小値と最大値を指定する

可変値での最小値と最大値を指定する

CSSのスタイルで指定する値の最小値と最大値を指定することができる。

例えば、width: clamp(200px, 50vw, 400px)と指定すると、要素の幅は200px以上400px以下で、画面幅の50%になるように可変になる。

.element {
  width: clamp(200px, 50vw, 400px);
}

計算式を指定することができる

CSSのスタイルで指定する値の最小値と最大値を指定する際に、計算式を指定することもできる。

例えば、width: clamp(200px, 10vw + 20px, 400px)と指定すると、要素の幅は200px以上400px以下で、画面幅の10%に20pxを加えた値になるように可変になる。

.element {
  width: clamp(200px, 10vw + 20px, 400px);
}

関数も使用できる

CSSのスタイルで指定する値の最小値と最大値を指定する際に、関数も使用できる。

例えば、width: clamp(200px, min(10vh, 10vw), 400px)と指定すると、要素の幅は200px以上400px以下で、画面幅の10%と画面高の10%の小さい方になるように可変になる。

.element {
  width: clamp(200px, min(10vh, 10vw), 400px);
}