Note（比較関数）

課題

レスポンシブ対応をしている中で、特にブレイクポイントをいくつか設定した場合に、フォントサイズを可変にしつつも、あるフォントサイズ以上にはならないようにしたい。

解決

比較関数（min, max, clamp）を使うことで、いろいろな対応ができます。

最大値を設定する：min()
例えば　min(50%, 100px)　とすると、
　「50％」と「100px」のどちらか小さい方を適用する。
となります。
ちょっとややこしいかもしれませんが、片方は可変の数値（50％）、片方は固定値（100px）とすることで、固定値を超える数値になることはないので、最大値を定義することになります。

最小値を設定する：max()
例えば　max(50%, 100px)　とすると、
　「50％」と「100px」のどちらか大きい方を適用する。
となります。
先ほど同じで、片方は可変の数値（50％）、片方は固定値（100px）とすることで、固定値以下の数値になることはないので、最小値を定義することになります。

最大値・推奨値・最小値を設定する：clamp()
例えば　clamp(100px, 50%, 500px)　とすると、
最小値（100px）〜最大値（500px）の間で数値を可変させることができます。

フォントサイズに適用するなら、例えば
font-size: min(50vw, 30px）
のように設定することで、レスポンシブでフォントを最大値がある可変サイズ…とすることができます。