Clamp函数是CSS函数 min() max()的完美结合。

在研究CSS clamp()之前，我们先看一下这两个函数CSS min() 和 CSS max()。 理解它们将有助于让 CSS clamp() 更容易理解。

CSS min() 和 CSS max()

CSS min() 允许您将逗号分隔表达式列表中的最小值设置为 CSS 属性值。CSS max() 将从逗号分隔的表达式列表中设置最大的值作为 CSS 属性值。

min() 和 max() 都可以在允许 <length>、<frequency>、<angle>、<time>、<percentage>、<number> 或 <integer> 的任何地方使用。

举个例子：

width: min(50vw, 700px);

这意味着div的宽度最大为 700 像素，但是，如果 div 在视口宽度的 50% 处更小（50vw = 50 视图宽度），它将采用两个值中的较小值。因此，如果视口为 1300px 宽，则 <div> 最终将是 650px 宽（转换为 50vw），但是，如果视口是 1600px 宽，则 <div> 将只有 700px 宽，因为那是两个可用选项之间的较小值。max的例子也一样，只不过是取不同情况下的最大值。

虽然 CSS min() 和 CSS max() 在使响应式 CSS 设计更容易方面取得了长足的进步，但开发人员想要更多，我们希望能够在同一个 CSS 函数中定义下限和上限。 于是，CSS clamp() 诞生了。

CSS Clamp()

CSS clamp() 结合了 CSS min() 和 CSS max() 的优点。 CSS clamp() 本质上是在上限和下限之间设置一个值。 clamp() 允许在定义的最小值和最大值之间的值范围内选择中间值。它采用三个参数：最小值、首选值和最大值。

如果将 clamp() 分解为 CSS min() 和 CSS max() 函数，它会是这样的：clamp(MIN, VAL, MAX) 解析为 max(MIN, min(VAL, MAX))。这就是开发人员过去必须做的事情才能在 CSS 中进行扩展。

虽然它很容易解释，但 MIN 值是最小值。这是允许值范围内的下限。如果首选值小于此值，将使用 MIN 值。

首选 VAL 是表达式，只要结果介于 MIN 和 MAX 值之间，就会使用其值。

MAX 值是最大（最正）表达式值，如果首选值大于此上限，则使用该值。

比如下面的代码，当75%的值小于350px，就使用350px，当75%的值大于800px，就使用800px，介于之间就使用75%。

width: clamp(350px, 75%, 800px);

字体的例子如下：

font-size: clamp(1.5rem, 5vw, 4rem);

总结：

如果您需要让文本在移动设备上变得更小，但又不是难以阅读的小字体，clamp() 可以处理。当用户在大型桌面显示器上时，希望放大该图像， clamp() 也同样适用。从现在开始，每当我需要在上限和下限内响应时， 都可以使用CSS clamp()来尝试。