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>