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>

打印本页