clamp
最小値・推奨値・最大値の3つを指定し、値をその範囲に収める関数。 メディアクエリで段階的に切り替えていた文字サイズなどを、1行で書けます。
今の書き方
最小値・推奨値・最大値を、1行で書けます。 下限から上限まで一定の割合で増やす場合は、メディアクエリが要りません。
h1 {
font-size: clamp(1.25rem, 0.625rem + 2.5vw, 2.5rem);
}以前の書き方
下限と上限をメディアクエリで切り替え、その間をcalc()でつないでいました。
切り替える画面幅は、calc()の式と合うように自分で計算する必要がありました。
h1 {
font-size: 1.25rem;
}
@media (min-width: 400px) {
h1 {
font-size: calc(0.625rem + 2.5vw);
}
}
@media (min-width: 1200px) {
h1 {
font-size: 2.5rem;
}
}置き換えるときの注意点
- 文字サイズに使うときは、最小値と最大値を
remで書き、最大値を最小値の2倍以上にします。 ページを拡大したときに、文字が200%まで大きくなるようにするためです。 - 中の値には、
calc()を書かなくても計算式を書けます。+と-の前後には空白が必要で、ないと宣言ごと無効になります。 - 画面幅の途中で増え方を変えたい場合は、メディアクエリで範囲を分け、範囲ごとに
clamp()を書きます。 - 最小値が最大値より大きいときは、最小値になります。
- 片側だけを制限したいときは、同じ時期に使えるようになった
min()・max()を使います。 例えばwidth: min(100%, 960px)は、幅を100%にしつつ、960pxを超えないようにします。
Browser Support
Chrome
v79+2019-12-10Edge
v79+2020-01-15Safari
v13.1+2020-03-24Safari (iOS)
v13.4+2020-03-24Firefox
v75+2020-04-07