CSS 函数 - clamp（）

CSS 函数 clamp（） 将值保持在由最小值和最大值定义的范围内。

它有三个参数：最小值、首选值和最大允许值。

可能的值

clamp（min， val， max）函数采用三个逗号分隔的表达式作为参数。

min - 最小值表示最小值或最负值，是允许范围的下限。如果首选值低于此最小值，则使用最小值。
val - 首选值是当它位于最小值和最大值定义的范围内时使用的表达式。
max - 如果首选值超过此上限，则将最大值分配给属性，即允许的最大（最正）表达式值。

clamp（）中的表达式可以包含数学函数、文字值或其他有效的参数类型。允许直接加法、减法、乘法和除法。

括号可用于指定计算顺序。

要记住的要点：

对于自动布局表和固定布局表中的列、列组、行、行组和单元格，表格尺寸（宽度和高度）中的百分比被解释为 auto。
CSS 表达式中允许嵌套 max（） 和 min（） 函数，其中内部函数被视为括号。完整的数学表达式，包括加法、减法、乘法和除法，可以在嵌套的 max（） 和 min（） 函数中不需要 calc（）函数。
表达式可以包含加法（+）、减法（-）、乘法（*）和除法（/）运算符，遵循通常的优先规则。应在 + 和 - 操作数的两侧添加空格。操作数可以是任何语法<长度>值，并使用不同的单位。括号可用于控制计算的顺序。
通常，可能需要在 clamp（）函数中使用 min（）和 max（）函数。

返回值

函数 clamp（MIN， VAL， MAX） 解析为 max（MIN， min（VAL， MAX））。

该函数返回类型的值为 <length>、<frequency>、<angle>、<time>、<percent>、<number> 或 <integer>，，具体取决于给定的参数。

语法


clamp( <calc-sum>#{3} )

哈希（#）标记乘数表示实体可以重复一次或多次（此处为 3 次），但每次出现都用逗号（'，'）分隔。

CSS clamp（） - 基本示例

以下示例演示了如何使用 CSS 函数 clamp（）设置响应框宽度，确保它们在适应父容器的宽度时在指定的最小值和最大值之间缩放。

调整浏览器窗口的大小，以查看如何在夹紧功能的帮助下根据视口调整框的宽度。


<html>
<head>
<style>
	 	.container {
	 	 	 display: flex;
	 	 	 flex-wrap: wrap;
	 	 	 justify-content: center;
	 	}
	 	.box {
	 	 	 width: clamp(200px, 40%, 300px);
	 	 	 height: 150px;
	 	 	 margin: 20px;
	 	 	 background-color: lightblue;
	 	 	 display: flex;
	 	 	 justify-content: center;
	 	 	 align-items: center;
	 	 	 font-size: 18px;
	 	 	 font-weight: bold;
	 	}
</style>
</head>
<body>
	 	<div class="container">
	 	 	 <div class="box">Box 1</div>
	 	 	 <div class="box">Box 2</div>
	 	 	 <div class="box">Box 3</div>
	 	 	 <div class="box">Box 4</div>
	 	</div>
</body>
</html>

打印本页