cssのmin(),max(),clamp()関数
cssで@media screenを使っているのはもう古い！！
ということで続いておすすめのcssの書き方を紹介しよう〜！！
それがmin()とmax()とclamp()の関数だ！
サポートされていなのではないか？と思われるが、
https://caniuse.com/css-math-functions
主なブラウザではサポートされ始めている。
なので自分は max() min() clamp() に移行することに決めた。
自分は@media screenをめんどくさいと感じている。なぜめんどくさいかというとcssで同じ{}のなかに書くことができないからである。
それでは使い方を見ていこう〜！！
max()
width: max( 50%, 500px ) ;
簡単に言うと 最小値 を設定する関数になります。
横幅が1000px以下（900pxなど）の場合 500px が維持されます。
逆に横幅が1000px以上（1300pxなど）になると 50% が適用されます。
このように指定した要素の大きさによって最大値を決めることができるのです。
min()
width: min( 50%, 500px ) ;
簡単に言うと 最大値 を設定する関数になります。
横幅が1000px以下（900pxなど）の場合 50% が維持されます。
逆に横幅が1000px以上（1300pxなど）になると 500px が適用されます。
このように指定した要素の大きさによって最大値を決めることができるのです。
clamp()
width: clamp( 300px, 50%, 500px ) ;
clamp()はmin()とmax()を同時に使うことと同じです。
個人的に一番clamp()が使いやすいと思います。
要素が 300px ＜ 50% ＜ 500px という意味で横幅がどれだけ小さくなろうとも要素が300pxより小さくなることがなく、横幅がどんだけ大きくなろうとも500pxより大きくなることはないという意味です。
