CSS clamp() 函數

定義和用法

CSS 的 clamp() 函數用于設置一個值，該值會根據視口的大小在最小值和最大值之間自適應調整。

clamp() 函數有三個參數：最小值、首選值和最大值。如果首選值在指定范圍內，瀏覽器會選擇首選值；否則，瀏覽器會選擇最小值或最大值。

實例

將 <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)
值 描述
min 可選。指定允許的最小值。
preferred 必需。指定首選值。
max 可選。指定允許的最大值。

技術細節

版本： CSS Values and Units Module Level 4

瀏覽器支持

表格中的數字表示首個完全支持該函數的瀏覽器版本。

Chrome Edge Firefox Safari Opera
79 79 75 13.1 66