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>

打印页面