max-width
widthを100%とかで指定した場合に、広げたときにはみ出さないようにする。
また、かなりの部分はmin関数で置換できるので使用を検討してもよい。
ただ、そのページで広く、制約があるってことを明示化する場合にはまだまだ実務では使う。
メディアクエリーを書かなくてもよくなる。
min-width
逆に、widthを30%とかで指定した場合に、幅を狭めすぎた場合に早く止めたい場合に使う。
clamp
最小値、推奨値、最大値の三つの引数を取る。
ユースケース:すべての文字要素に使うのではなく、見出しとかだけに使うのが良い。
推奨値より小さかったら最小値が使われ、大きければ、最大値が使われる。
font-sizeで使うの代表例。アクセシビリティ的な文字サイズの読みやすさにつながる。
|
1 |
font-size: clamp(1rem,1.25vw,1.8rem) |
少し前は、font-size:1.25vwで画面の横幅に合わせて拡大縮小する思想があったが、それだと、画面幅が小さいと小さくなりすぎるし、画面幅が大きいとでかくなりすぎるって問題になったからこそこの書き方が登場した。


この記事へのコメントはありません。