本頁面由 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() 函式會將值保持在這個 Codepen 示範中指定的最小值和最大值之間。

您可以在允許 <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))。

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

完美寬度

根據 Robert Bringhurst 的The Elements of Typographic Style 所述，「45 到 75 個字元之間的任何內容在文字大小採用襯線樣式的文字遮罩中，單一欄頁面的適當長度，是廣為認可所代表的。」

如要確保文字區塊的寬度介於 45 到 75 個半形字元之間，請使用 clamp() 和 ch (0 寬度字元進度) 單位：

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

這樣可讓瀏覽器決定段落的寬度。這個寬度會預設為 50%。如果 50% 小於 45ch，寬度會改用 45ch；如果寬度大於 75ch，則會使用 75ch。

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

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

使用 min() 函式設定最大寬度。

同理，您可以使用 max() 函式設定清晰的文字大小下限，如 width: max(45ch, 50%); 中所示。在此情況下，瀏覽器會選取較大的值，也就是元素必須是 45ch 或更寬。

使用 max() 函式設定最小寬度。

管理邊框

您也可以使用 max() 設定邊框間距的大小下限。這個範例來自 CSS Tricks，其中讀者 Caluñ 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);
}

其他資源

在 Unsplash 上來自 @yer_a_wizard 的封面圖片。