CSSのmin()・max()・clamp()を使ってみる

CSS関数のmin()・max()・clamp()を使ってみます。

対応ブラウザ

対応ブラウザはこちら
IEでは非対応になります。

サンプルコード

min()・max()・clamp()をそれぞれ使ってみます。

<div class="min">min</div>
<div class="max">max</div>
<div class="clamp">clamp</div>

min()・max()・clamp()はそれぞれカンマ区切りで複数の値を指定することができ、min()の場合はその最小値、max()の場合はその最大値が適用されます。
clamp()の場合は最小値・推奨値・最大値の3つを設定できます。

.min {
	width: min(50%, 800px);
}
.max {
	width: max(50%, 800px);
}
.clamp {
	width: clamp(500px, 50%, 800px);
}

min()・max()・clamp()のデモページ