响应式布局之 clamp 函数，好用到起飞！

CSS 中有大量令人惊叹的属性和特性，但似乎没有人谈论的是clamp函数。这个函数让我们可以对任何 CSS 属性执行min-width, max-width, 和之类的操作。

CSS clamp语法

clamp() 函数接收三个用逗号分隔的[表达式]作为参数，按最小值、首选值、最大值的顺序排列。下面是一个实际中的clamp函数示例。

.class {
  font-size: clamp(1rem, 2vmin, 3rem);
}
复制代码

上面的代码将我们设置font-size为2vmin，但它也指定了 的最小值和最大值font-size。这与执行以下操作相同。

.class {
  font-size: 2vmin;
  min-font-size: 1rem;
  max-font-size: 3rem;
}
复制代码

然而，这之所以如此好用，是因为min-font-size。max-font-size实际上并不存在，但使用clamp函数我们可以模仿它们。 通过使用clamp，我们的font-size 将以 2vmin 的比例随屏幕大小缩放，但它永远不会小于 1rem，也永远不会大于 3rem。可能很多人会对vmin和vmax是干什么的，在这里也顺便解释下！

vmin和vmax

vh和vm总是与视口的高度和宽度有关，与之不同的，vmin和vmax是与当下屏幕的宽度和高度的最大值或最小值有关，取决于哪个更大和更小。

例如，如果浏览器设置为1100px宽、700px高，1vmin会是较小的7px，而1vmax将是较大的11px。然而，如果宽度设置为800px，高度设置为1080px，1vmin将会是较小的8px，而1vmax将会是较大的10.8px

兼容性

从 caniuse 网站可以看出，不支持IE11。

结论

此功能非常易于使用和理解，它也为许多以前不可能的可能性打开了大门。