CSS 函数

CSS 函数 min() 允许您从逗号分隔表达式列表中指定最小(最负)值作为 CSS 属性值。

它适用于值 <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">名字:</label>
      <input type="text" id="name" name="name" placeholder="输入名字" required>
      <label for="email">邮箱:</label>
      <input type="email" id="email" name="email" placeholder="输入邮箱" required>
      <label for="message">消息:</label>
      <textarea id="message" name="message" placeholder="输入消息" required></textarea>
      <button type="submit">提交</button>
   </form>
</body>
</html>