min(),max(),clamp()について
min(),max(),clamp()はプロパティに設定する値を自動で計算してくれるCSSの数学関数です。
calc()も同じく数学関数。
min()とは
カッコの中に2種類の値を設定し、どちらか小さいほうの値が適用されます。（＝最大値を設定できる）
minなのに最大値？意味が分からないと思いますが、これまでmax-widthとwidhで設定していたものを min() の一行で書けます。
box {
width: 50%;
max-width: 700px;
}box {
width: min(50%, 700px);
}上の場合だと、ブラウザ幅が1000pxのとき50%の幅は500pxとなり700pxより小さいため、50％の値が適用されます。
ブラウザ幅が1400px以上になると50%の幅が700px以上になるため、値の小さい700pxの方が適用されます。
max()とは
カッコの中に2種類の値を設定し、どちらか大きいほうの値が適用されます。（＝最小値を設定できる）
これはwidthとmin-widthを使っていた時と同じイメージです。
box {
width: 50%;
min-width: 300px;
}box {
width: max(50%, 300px);
}上の場合だと、ブラウザ幅が600px以下の時は300pxが適用され、601px以上のとき50％の幅が300pxより大きくなるため、50%が適用されます。
clamp()とは
上記のmin(),max()を合わせたものです。これはカッコの中に「最小値」「推奨値」「最大値」の3つの値を入れるので、イメージしやすいと思います。
box {
width: clamp(300px, 50%, 900px);
}下のSAMPLEページに三種類のデモが置いてあります。ブラウザ幅を変えて確認してみてください。
つかいどころ
上記の説明では分かりやすいようwidthの値として使用しましたが、font-sizeやmargin、paddingの値としても使えます。
safariで効かないときは
safariにも対応していますが、うまく動かないときは以下の記述を追加してみてください。
* {
min-height: 0vw;
}設定する値に演算子が使える
上記の例で「％」で設定していた値には「vw」や演算子も使えます。ただし流動値でないといけないの固定される値は設定できません。
block {
width: min(100vw - 50px, 700px);
}