min()

試一試

width: min(50vw, 200px);

width: min(100vw, 4000px);

width: min(150vw, 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>

在第一個例子中，寬度最大為 200px，但如果視口寬度小於 400px（在這種情況下，1vw 等於 4px，所以 50vw 等於 200px），則寬度會更小。此技術使用絕對單位指定屬性的固定最大值，並使用相對單位允許值縮小以適應較小的視口。

語法

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

引數

min() 函式將一個或多個逗號分隔的表示式作為其引數，並使用最小（最負）的表示式結果值作為值。

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

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

注意

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

正式語法

<min()> = 
  min( <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        

無障礙

使用 min() 設定最大字型大小時，請確保字型仍可縮放至少 200% 以提高可讀性（無需輔助技術，如縮放功能）。

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

示例

為標籤和輸入設定最大尺寸

min() 的另一個用例是為響應式表單控制元件設定最大尺寸：允許標籤和輸入的寬度隨表單寬度的縮小而縮小。

我們來看一些 CSS

input,
label {
  padding: 2px;
  box-sizing: border-box;
  display: inline-block;
  width: min(40%, 400px);
  background-color: pink;
}

form {
  margin: 4px;
  border: 1px solid black;
  padding: 4px;
}

在這裡，表單本身以及邊距、邊框和內邊距將佔其父元素寬度的 100%。我們將輸入和標籤宣告為表單寬度（不含內邊距）的 40% 或 400px，取兩者中較小的一個。換句話說，標籤和輸入的最寬尺寸是 400px。它們最窄的尺寸是表單寬度的 40%，這在智慧手錶螢幕上會非常小。

<form>
  <label for="misc">Type something:</label>
  <input type="text" id="misc" name="misc" />
</form>

規範

瀏覽器相容性

另見

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