やわらかしかっけい

なんでもすぐに忘れてしまう自分のために

フォントサイズに最小や最大を設定したい時

レスポンシブのスマホ表示で

サイト全体のフォントサイズが小さくなっても、

font-size:90% とか 0.9em で設定した箇所を

14px以下のサイズにはしたくない! みたいな時に。

mgmgblog.com

min関数、max関数

どうやらfont-sizeだけではなく、marginなどにも使えるらしい。

最小サイズを設定したい時
span{ font-size:max(90%,14px); }

→基本90%だけど14px以下にはならない

最大サイズを設定したい時
span{ font-size:min(160%,30px); }

→基本160%だけど30px以上にはならない

***

「maxとmin、逆じゃないんか」とは思うけど

まぁ気をつけて使えばいいだけなので、充分ありがたいっす。

知らなかったな〜

developer.mozilla.org

どのブラウザでもいけるっぽい。