CSS min() max() clamp()

min()

width と max-width を1行で記述できる。下記2つは同じ。

width: min(100%, 500px);

width: 100%;
max-width: 500px;

max()

width と min-width を1行で記述できる。下記2つは同じ。

width: max(80%, 500px);

width: 80%;
min-width: 500px;

clamp()

最小値、推奨値、最大値の3つを記述できる。

width: clamp(500px, 50%, 1000px)

min-width: 500px
max-width: 1000px
※500px と 1000px の間は 50%