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