本頁面由 Cloud Translation API 翻譯而成。

CSS min()、max() 和 clamp()

瞭解如何透過我們支援完善的 CSS 函式控制元素大小、維持適當間距，以及實作流暢字體排版。

Una Kravets

隨著回應式設計變得更加細緻，CSS 也會持續不斷改進，作者更能掌控權min()、 max()和 clamp() 函式，所有新式瀏覽器都能使用這種最新瀏覽器提升網站和應用程式的靈活度您可以使用功能，控制元素大小和大小，並維持以及建立靈活流暢的字體排版。

數學函式 (calc()、min()、max() 和 clamp()) 允許使用加法 (+)、減法 (-)、乘法 (*) 和除法 (/) 來當做元件值
CSS 價值和單位第 4 級

瀏覽器支援

`min()`

瀏覽器支援

資料來源

`max()`

瀏覽器支援

資料來源

`clamp()`

瀏覽器支援

資料來源

用量

您可以在任何 CSS 的右側使用 min()、max() 和 clamp() 合理地表現對於 min() 和 max()，請提供引數清單，瀏覽器則會判斷最小或最大以 width: min(1rem, 50%, 10vw) 為例瀏覽器算出哪個相對單位的最小也就是元素寬度的值

min() 函式會從以下項目的清單中選取最小值： Codepen 示範。

max() 函式會對最大值執行相同操作。

max() 函式會從以下項目的選項清單中選取一個值： Codepen 示範。

如要使用「clamp()」，請輸入三個值：最小值，最小值為計算起始值和最大值

clamp() 函式會將其值維持在指定的最小值和上限。

您可以在 <length>、<frequency>、可使用 <angle>、<time>、<percentage>、<number> 或 <integer>。個人中心以便自行使用 (如 font-size: max(0.5vw, 50%, 2rem))， calc() (如 font-size: max(calc(0.5vw - 1em), 2rem) 中所示) 或組合 (例如 font-size: max(min(0.5vw, 1em), 2rem))。

以下舉例說明如何使用這些函式。

採用適當寬度

根據《The Elements of Typographic》樣式由 Robert Bringhurst 製作，「45 到 75 個字元的任何影片受到普遍認為是襯線文字錶面中設定的單一資料欄頁面的行數理想長度文字大小。」

為確保文字區塊寬度介於 45 到 75 個半形字元之間，請使用 clamp() 和 ch (最多可再輸入 0 個字元) 單位：

p {
  width: clamp(45ch, 50%, 75ch);
}

這會讓瀏覽器決定段落的寬度。這個引數會將寬度設為預設值為 50%。如果 50% 小於 45ch，系統會使用 45ch 做為寬度，且如果 50% 的寬度比 75ch 寬，則會使用 75ch。

使用 clamp() 函式設定最小和最大寬度。請參閱 Codepen 上的示範。

您也可以只使用 min() 或 max() 來分解這個。如果您希望元素寬度為 50%，展開時不得超過 75ch 螢幕，請使用 width: min(75ch, 50%); 設定大小上限。

使用 min() 函式設定寬度上限。

同樣地，您也可以使用 max() 設定清晰易讀的文字大小函式，如 width: max(45ch, 50%); 中所示。瀏覽器在這裡選取值相對較大，表示元素大小必須為 45ch 或更寬。

請使用 max() 函式設定寬度下限。

管理邊框間距

您也可以使用 max() 設定邊框間距大小下限。這個範例來自 CSS 秘訣、 Caluna de Lacerda Pataca 讀者分享這個想法：針對較大的螢幕增加額外的邊框間距，但應保持最小邊框間距螢幕大小方法是使用 calc() 或 max()，並減去元素兩側的邊框間距：calc((100vw - var(--contentWidth)) / 2)、或 max(2rem, 50vw - var(--contentWidth) / 2)。在樣式表中，應該如下所示：

footer {
  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}

敬上

使用 max() 函式設定元件的最小邊框間距。請參閱 Codepen 上的示範。

流體字體排版

如要啟用流暢字體排版， Mike Riethmeuller 是熱門技巧使用 clamp() 函式設定字型大小下限、字型大小上限並允許使用者縮放

使用 clamp() 建立流暢字體排版。請參閱 Codepen 上的示範。

在 clamp(), 設計字型縮放之前，必須使用複雜的樣式字串。現在，就能讓瀏覽器為您代勞設定可接受的最小字型大小 (例如標題的 1.5rem)、大小上限 (例如 3rem) 和理想的尺寸 (例如 5vw)。現在您採用的字體排版會隨著網頁的再根據只需要編寫少量程式碼：

p {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

其他資源

來自 @yer_a_wizard 的封面圖片不受干擾。