clamp関数で最小値、最大値を指定する
/* CSS */
font-size: clamp(最小値, 基準値, 最大値);
/* 例 */
font-size: clamp(1rem, 2.5vw, 2rem);基準値を決めたら、最小値、最大値を入れるだけ。これで比率に応じてサイズが変化してくれる。
CSSの比較関数で最小値、最大値を指定する
2022.02.02（更新日：2022.02.02）
レスポンシブが当たり前の今、四苦八苦してたのがフォントサイズ。
他の部分は比率で管理出来ても、この部分だけは細かくメディアクエリで分けることをしていた。
レスポンシブにありがちの幅伸縮で「ガクッ」とサイズが変わるのが「イケてない」。
そんな悩みを解決出来るかもしれない。
この記事は１年以上経過しています。内容的に古い場合があります。
min関数で最大値を指定する
min関数
/* CSS */
width: min(基準値, 最大値);
/* 例 */
width: min(50%, 500px); 各値の内、最も小さい値を適用してくれる。
上の例だとブラウザの幅が500px以上の場合「500px」、それ以下の場合は「50％」が適用される。
max関数で最小値を指定する
max関数
/* CSS */
width: max(基準値, 最小値);
/* 例 */
width: max(50%, 500px); 各値の内、最も大きい値を適用してくれる。
上の例だとブラウザの幅が500px以上の場合「50%」、それ以下の場合は「500px」が適用される。
まとめ
ちょっとした注意点・補足
各数値には必ず「単位」を付加する。例え「０」であっても。またieでは使用出来ない。
また各値内で四則演算も「calc」を使用せずに実行出来る。さらに入れ子で使用も可能。（max内にminの指定とか）
marginやpaddingプロパティに使える
font-sizeとwidthの例以外にもmarginやpaddingにも使用出来る。これらをうまく使用するとコードの量も減らせるし、メンテもしやすくなるかも。特に増えがちだったホントサイズ指定には良いかも。
