【CSS】min-font-size/max-font-sizeを指定する
font-size
の最大値/最小値を指定したい時。
min-font-size
/max-font-size
なるプロパティは存在しないが、min()
・max()
・clamp()
でそれを実現できる。
最小値の指定
.text { font-size: max(5vw, 12px);}
基準値を5vw
、最小値を12px
とする時。
最大値の指定
.text { font-size: min(5vw, 20px);}
基準値を5vw
、最大値を20px
とする時。
最小値・最大値の指定
.text { font-size: clamp(12px, 5vw, 20px);}
基準値を5vw
、最小値を12px
、最大値を20px
とする時。