HTML一覧CSS一覧CSS関数FlexboxシミュレーターCSS関数

サイズ

clamp() 最小と最大のあいだで大きさを変える

重要度5 / 5

意味

画面幅に合わせて文字の大きさを変えたいときに使います。clamp(最小, 好みの大きさ, 最大) の順です。狭い画面では最小より小さくならず、広い画面では最大で止まります。

好みの大きさに vw だけを書くと、スマホで小さくなりすぎることがあります。2vw + 1rem のように rem を足すと、読みやすい範囲に収まりやすいです。候補の小さい方は min()、大きい方は max() です。

コード

HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。

HTML
<h1>画面幅に合わせて、文字の大きさが変わります。</h1>
CSS
h1 {
  font-size: clamp(1.25rem, 2vw + 1rem, 2.25rem);
  line-height: 1.4;
}

プレビュー

ブラウザ対応

主要ブラウザの対応状況
ブラウザ対応
Chrome79〜
Firefox75〜
Safari13.1〜
Edge79〜
Chrome Android79〜
Safari iOS13.4〜

出典: MDN Web Docs(`@mdn/browser-compat-data`)