今まで悩まされていたIE11から解放されたらとっても便利なCSSclamp()、min()、max()の出番です！
今まで手間でもやらなければならなかった、レスポンシブ対応でメディアクエリでの切り替えが必要ないんです。
幅はもちろん、フォントサイズにも対応できるのでとっても便利。
calc()関数と同様の使い方で計算式も使えますよ！

※calc()と一緒でmarinやpaddingにも使用できます
※主要なブラウザもすべてサポート済み。

clamp()

clamp()関数は、基準値を決めて、そこから最小値、最大値を指定できます。

書き方

width: clamp( 200px, 60%, 1200px ) ;

この場合、下記の横幅が適用されます。
最小値が200px
基準値が60%
最大値が1200px
基本的には全体の60%の横幅ですが、200pxより小さくならず、1200pxより大きくなることはありません。

数値に計算式を使ってみる

width: clamp( 200px - 40px, 100% / 2 , 1200px ) ;

この場合、下記の横幅が適用されます。
最小値が200px - 40px
基準値が100% / 2
最大値が1200px
基本的には全体の50%の横幅ですが、160pxより小さくならず、1200pxより大きくなることはありません。

フォントサイズに使ってみる

font-size: min( 2.4rem , 3vw, 3.6rem ) ;

この場合、下記のフォントサイズが適用されます。
最小値が2.4rem
基準値が、ウィンドウ幅に対して、3vw
最大値が3.6rem
ウィンドウ幅を縮小しても2.4rem以下になることはなく、ウィンドウ幅を大きくしても3.6rem以上になることはありません。
よって、2.4rem～3.6remの間で自動可変してくれることになります！

min()

min()関数は、最小値を決めます

width: min( 40%, 360px ) ;

この場合、下記の横幅が適用されます。
基準値が40%
最大値が360px
最小値が全体の40%の横幅ですが、360pxより大きくなることはありません。

フォントサイズに使ってみる

font-size: min( 3vw, 2.4rem ) ;

この場合、下記のフォントサイズが適用されます。
基準値が、ウィンドウ幅に対して、3vw
最大値が2.4rem
基本フォントサイズは3vwですが、ウィンドウ幅を大きくしても2.4rem以上になることはありません。

max()

max()関数は、最小値を決めます

width: max( 40%, 360px ) ;

この場合、下記の横幅が適用されます。
最小値が360px
基準値が40%
最大値が全体の40%の横幅ですが、360pxより小さくなることはありません。

フォントサイズに使ってみる

font-size: max( 3vw, 2.4rem ) ;

この場合、下記のフォントサイズが適用されます。
最小値が2.4rem
基準値が、ウィンドウ幅に対して、3vw
基本フォントサイズは3vwですが、ウィンドウ幅を小さくしても2.4rem以下になることはありません。