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-10
  • Edge

    v79+
    2020-01-15
  • Safari

    v13.1+
    2020-03-24
  • Safari (iOS)

    v13.4+
    2020-03-24
  • Firefox

    v75+
    2020-04-07

機能名やコードで検索できます

例:aspect-ratio、:has()、padding-top

別の言葉や、プロパティ名で試してください

検索を読み込めませんでした