CSS 函式 - min()

CSS 函式 `min()` 允許您指定從逗號分隔的表示式列表中最小（最負）的值作為 CSS 屬性值。

它適用於 `<length>`、`<frequency>`、`<angle>`、`<time>`、`<percent>`、`<number>` 或 `<integer>` 值。

`min()` 函式接受多個逗號分隔的表示式。
它計算這些表示式，並使用最小的（最負的）值作為輸出。
這些表示式可以是算術運算、字面值或其他有效引數，例如 <length>。
您可以靈活地使用各種單位，並在必要時使用括號來控制計算順序。

要點

包含表格列、列組、行、行組和單元格中寬度和高度百分比的數學表示式（無論表格是自動佈局還是固定佈局），都可以像顯式指定 `auto` 一樣進行處理。
允許將 `max()` 和其他 `min()` 函式作為表示式值巢狀。這些表示式是完整的數學表示式，允許直接進行加、減、乘、除運算，無需 `calc()` 函式。
表示式可以由使用加法 (+)、減法 (-)、乘法 (*) 和除法 (/) 運算子組合的值組成，遵循運算子優先順序的標準規則。

請記住在 + 和 - 運算子的兩側包含空格。表示式中的運算元可以是任何 `<length>` 語法的值。
組合 `min()` 和 `max()` 值不僅可能，而且通常是必要的。您也可以在 `clamp()` 或 `calc()` 函式中包含 `min()`。
如果要應用多個約束，可以包含兩個以上的引數。

語法

min( <calc-sum># )

井號 (#) 標記乘數表示實體可以重複一次或多次（例如，加號乘數），但每次出現都由逗號 (',') 分隔。

CSS min() - 輸入大小

使用 `min()` 設定響應式表單控制元件的最大尺寸，使標籤和輸入在表單寬度縮小時可以調整大小。

以下示例演示了 `min()`。調整瀏覽器視窗大小以檢視效果。

<html>
<head>
<style>
   label,input{
      display: block;
      margin-bottom: 10px;
      max-width: min(400px, 60%);
      width: 100%;
      font-size: 18px;
      padding: 10px;
      border-radius: 5px;
      border: 1px solid #ccc;
   }
</style>
</head>
<body>
   <form>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" placeholder="Enter your name" required>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" placeholder="Enter your email" required>
      <label for="message">Message:</label>
      <textarea id="message" name="message" placeholder="Enter your message" required></textarea>
      <button type="submit">Submit</button>
   </form>
</body>
</html>

列印頁面