max()

試一試

width: max(20vw, 400px);

width: max(20vw, 100px);

width: max(5vw, 100px);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <img
      alt="Firefox logo"
      class="logo"
      src="/shared-assets/images/examples/firefox-logo.svg" />
  </div>
</section>

在上面顯示的第一個示例中，寬度將至少為 400px，但如果視口寬度超過 2000px（在這種情況下，1vw 為 20px，因此 20vw 為 400px），則會更寬。此技術使用絕對單位指定屬性的固定最小值，並使用相對單位允許值隨著更大的視口而增長。

語法

max(1, 2, 3)
max(1px, 2px, 3px)

引數

max() 函式接受一個或多個逗號分隔的表示式作為其引數，並將最大（最正）表示式值用作其所賦值屬性的值。

表示式可以是數學表示式（使用算術運算子）、字面值或其他表示式，例如 attr()，它們計算為有效的引數型別（如 <length>），或巢狀的 min() 和 max() 函式。

您可以在表示式中為每個值使用不同的單位。如果需要，您還可以使用括號來確定計算順序。

注意

• 在自動和固定佈局的表格中，涉及表格列、列表、行、行組和單元格寬度和高度百分比的數學表示式可能會被視為指定了 auto。
• 允許將 min() 和其他 max() 函式巢狀為表示式值。表示式是完整的數學表示式，因此您無需使用 calc() 函式本身即可直接進行加法、減法、乘法和除法運算。
• 表示式可以是結合加法 (+)、減法 (-)、乘法 (*) 和除法 (/) 運算子的值，使用標準的運算子優先順序規則。請確保在 + 和 - 運算子的兩側放置一個空格。表示式中的運算元可以是任何 <length> 語法值。
• 您可以（並且通常需要）組合 min() 和 max() 值，或在 clamp() 或 calc() 函式中使用 max()。

正式語法

<max()> = 
  max( <calc-sum># )  

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | / ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN        

無障礙

當 max() 用於控制文字大小時，請確保文字始終足夠大以便閱讀。建議在 max() 中巢狀 min() 函式，並將其第二個值設定為 相對長度單位，該單位始終足夠大以便閱讀。例如：

small {
  font-size: max(min(0.5vw, 0.5em), 1rem);
}

這確保了最小尺寸為 1rem，並且文字大小在頁面縮放時也能隨之縮放。

• MDN 理解 WCAG，指南 1.4 解釋
• 理解成功標準 1.4.4 | W3C 理解 WCAG 2.0

示例

設定字型的最小尺寸

max() 的另一個用例是允許字型大小增長，同時確保它至少是一個最小尺寸，從而實現響應式字型大小並確保可讀性。

我們來看一些 CSS

h1 {
  font-size: 2rem;
}
h1.responsive {
  font-size: max(4vw, 2em, 2rem);
}

字型大小至少為 2rems，或頁面預設字型大小的兩倍。這確保了它的可讀性和可訪問性。

<h1>This text is always legible, but doesn't change size</h1>
<h1 class="responsive">
  This text is always legible, and is responsive, to a point
</h1>

將 max() 函式視為找到屬性允許的最小值。

規範

瀏覽器相容性

另見

• calc()
• clamp()
• min()
• 學習：值和單位