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

瞭解如何使用這些廣泛支援的 CSS 函式，控制元素大小、維持適當的間距，以及實作流暢的字體排版。

Una Kravets

隨著響應式設計變得更精細，CSS 也不斷演進，讓作者享有更強大的控制權。min()、max() 和 clamp() 函式現已獲得所有新型瀏覽器的支援，是讓網站和應用程式更具動態性和回應性的最新工具之一。您可以使用這些函式控制元素大小和大小調整、維持元素間的間距，以及建立彈性且流暢的字體排版。

數學函式 calc()、min()、max() 和 clamp() 可讓含有加 (+)、減 (-)、乘 (*) 和除 (/) 的數學運算式用於元件值

CSS 值和單位等級 4

瀏覽器支援

min()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 11.1.

Source

max()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 11.1.

Source

clamp()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 13.1.

Source

用量

您可以在任何適當的 CSS 運算式右側使用 min()、max() 和 clamp()。針對 min() 和 max()，您提供值的引數清單，瀏覽器會判斷哪一個是最大或最小值。舉例來說，在 width: min(1rem, 50%, 10vw) 的情況下，瀏覽器會計算這些相對單位中哪一個最小，並將該值用於元素的寬度。

min() 函式會從這個 Codepen 範例的選項清單中選取最小值。

max() 函式也會針對最大值執行類似的作業。

max() 函式會從這個 Codepen 範例的選項清單中選取值。

如要使用 clamp()，請輸入三個值：最小值、用於計算的理想值，以及最大值。

在這個 Codepen 示範中，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))。

以下列舉幾個使用這些函式的範例。

完美寬度

根據 Robert Bringhurst 的《The Elements of Typographic Style》一書，一般認為 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 技巧，其中讀者 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。