CSS比較関数のmin()、max()、clamp()を使えば、これまで複数行書いていたコードをシンプルなコードで書けるようになります。

min()

min()はカンマで区切られた値を比較して、それらの最小値を返します。

要素に最大値を決めて、これ以上は大きくならないようにしたいというような場合に使います。
関数名がmin()なのに要素の最大値（max-width）を指定するというのがややこしいポイントです。

 

これまでは、widthとmax-widthを組み合わせていました。

 

min()を使えば、同じ内容を1行で書くことができます。

 

ビューポートの幅が1920pxの場合、100%（1920px）よりも500pxの方が小さいため、500pxで表示されます。
ビューポートの幅が390pxの場合、100%（390px）の方が500pxよりも小さいため、100%（390px）で表示されます。

DEMO

max()

max()はカンマで区切られた値を比較して、それらの最大値を返します。

要素に最小値を決めて、これ以上は小さくならないようにしたいというような場合に使います。
関数名がmax()なのに要素の最小値（min-width）を指定するというのがややこしいポイントです。

 

これまでは、widthとmin-widthを組み合わせていました。

 

max()を使えば、同じ内容を1行で書くことができます。

 

ビューポートの幅が1920pxの場合、100%（1920px）の方が500pxよりも大きいため、100%（1920px）で表示されます。
ビューポートの幅が390pxの場合、100%（390px）よりも500pxの方が大きいため、500pxで表示されます。

DEMO

clamp()

clamp()はカンマで区切られた(最小値 , 推奨値 , 最大値)の3つの値を比較して、条件に合うものを返します。
最小値：推奨値が最小値よりも小さい場合、要素に最小値が適用される
最大値：推奨値が最大値よりも大きい場合、要素に最大値が適用される
推奨値：要素が最小値よりも大きく、最大値よりも小さい場合、要素に推奨値が適用される

 

 

ビューポートの幅が1920pxの場合、推奨値は 50vw = 960px です。
つまり、(300px , 960px , 800px)で比較されます。
推奨値（960px）が最大値（800px）より大きいため、最大値（800px）が適用されます。

ビューポートの幅が390pxの場合、推奨値は 50vw = 195px です。
つまり、(300px , 195px , 800px)で比較されます。
推奨値（195px）が最小値（300px）より小さいため、最小値（300px）が適用されます。

DEMO