clamp()
3つの引数を取る
clamp(最小値,推奨値,最大値)
max(<min>, min(<val>, <max>))と同等
vwなどと組み合わせて使うことが多い
例えば、font-size, margin, paddingなど
font-sizeの場合の推奨値の決め方
基本的に以下の4つのパラメータを決めると推奨値が決まる
最大値
1.5rem（24px）や2rem（32px）などがよく使用されますGPT-4.icon
デカすぎても読みづらい
最小値
サービス上で使用する最小のfont-sizeを決める
ref
約0.83remとか
Viewportの最大値・最小値
最大値
サポートする最大の画面幅を指定する
例えば、大きなデスクトップディスプレイなどを基準にする
1200pxから1600pxを想定することが多い
最小値
サポートする最小の画面幅を指定する
例えば、スマホの最も狭い画面幅を基準にする
一般的に320pxや360pxが最低限のスマートフォンの画面幅としてよく使われる
上記の4つが決まれば後はツールを使って算出すればいい
上記の4つが決まれば決定できるなら、そもそもその4つを引数に取る関数があった方が読みやすいのだが..mrsekut.icon
書く際に模型酸が必要だし、読む際はもちろん意味不明になる
clamp()は便利だが、インターフェースの設計はちょっと微妙だ
数式の可読性の問題
https://gyazo.com/412a7d071b675aea20479a8f597db292
clamp(1rem, calc(0.875rem + 0.625vw), 1.5rem)
弾き出された数式が0.875rem + 0.625vwで、これだけ読んでもかなり意味がわからないmrsekut.icon
意味がわからないと、他人が修正しづらい
画面幅がB remのときに、そのサイズがA rem(最小値)になり
そこから1rem上がる毎にC remずつ増える
Cは傾きと捉える
数式を展開するのではなく、敢えて100vwを書くことで、可読性が向上している
上のやつよりはだいぶマシだけど、これはこれで初見ではムズい
clampの中の数式にはclac()を使わなくても計算してくれる
e.g. font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem)
他のユースケース
code:css
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: clamp(1rem, 2vw, 24px);
}
ユースケース色々