サイズ
clamp() 最小と最大のあいだで大きさを変える
意味
コード
HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。
<h1>画面幅に合わせて、文字の大きさが変わります。</h1>h1 {
font-size: clamp(1.25rem, 2vw + 1rem, 2.25rem);
line-height: 1.4;
}プレビュー
ブラウザ対応
| ブラウザ | 対応 |
|---|---|
| Chrome | 79〜 |
| Firefox | 75〜 |
| Safari | 13.1〜 |
| Edge | 79〜 |
| Chrome Android | 79〜 |
| Safari iOS | 13.4〜 |
出典: MDN Web Docs(`@mdn/browser-compat-data`)