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

瞭解如何使用這些清楚支援的 CSS 函式，控制元素大小、維持適當的間距，以及導入流動字體排版。

Una Kravets

隨著回應式設計變得越來越細，CSS 也會在持續演進，為作者提供更多掌控權。所有新式瀏覽器現在都支援 min()、max() 和 clamp() 函式，是讓編寫網站和應用程式更靈活、更靈敏的最新工具之一。您可以利用這些函式控制元素大小和大小調整、維持元素之間的間距，以及建立靈活有彈性的字體排版。

數學函式 calc()、min()、max() 和 clamp() 支援使用加法 (+)、減法 (-)、乘法 (*) 和除法 (/) 的數學運算式做為元件值

CSS 值和單元層級 4

瀏覽器支援

min()

瀏覽器支援

  • 79
  • 79
  • 75
  • 11.1

資料來源

max()

瀏覽器支援

  • 79
  • 79
  • 75
  • 11.1

資料來源

clamp()

瀏覽器支援

  • 79
  • 79
  • 75
  • 13.1

資料來源

使用方式

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

min() 函式會從這個程式碼研究室示範的選項清單中，選取最小值。

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 Tricks 提供範例，讀者 Caluese 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 的封面圖片。