CSS clamp() 関数

定義と使用方法

CSSの clamp() 関数は、最小値と最大値の間で視口の大きさに応じて自動的に調整される値を設定するために使用されます。

clamp() 関数には3つの引数があります：最小値、お選びいただける値、最大値。お選びいただける値が指定された範囲内にある場合、ブラウザはお選びいただける値を選択します；それ以外の場合、ブラウザは最小値または最大値を選択します。

例

<h1> 要素の最小フォントサイズを 2rem、最大フォントサイズを 3.5rem に設定します。同時に、<p> 要素の最小フォントサイズを 1rem、最大フォントサイズを 2.5rem に設定します：

h1 {
  font-size: clamp(2rem, 2.5vw, 3.5rem);
}
p {
  font-size: clamp(1rem, 2.5vw, 2.5rem);
}

実際に試してみてください

CSS 语法

clamp(min, preferred, max)

技術的詳細

ブラウザのサポート

テーブルの数字は、その機能を完全にサポートする最初のブラウザのバージョンを示しています。