CSS的clamp()函数是一个用于数值范围限制的内建函数，它接收三个参数，返回处于最小值和最大值之间的一个动态值。借助它，我们可以让元素的尺寸、间距或字体大小根据视口或其他条件灵活变化，同时避免超出合理区间。
clamp()的基本语法
clamp()函数的写法如下，它必须包含三个部分，顺序不能变：
/* 语法：clamp(最小值, 首选值, 最大值) */ width: clamp(200px, 50vw, 800px);
上面这段代码表示：元素宽度首选取视口宽度的百分之五十，但如果算出来小于200px就固定为200px，大于800px就固定为800px。
三个参数分别有什么作用
- 最小值：无论首选值多小，结果都不会低于它，用来防止内容挤变形。
- 首选值：通常是带相对单位（如vw、em）的表达式，决定正常情况下的尺寸。
- 最大值：限制尺寸上限，避免在宽屏上元素过大。
如何用clamp()设置值的范围限制
设置范围限制的本质就是合理定义那两个边界。比如做流式标题，希望它在手机上不小于16px，在桌面不超过32px：
.title {
/* 随视口缩放，但限制在16px到32px之间 */
font-size: clamp(16px, 4vw, 32px);
}
再看一个控制内边距的例子，让左右留白在12px到48px之间平滑过渡：
.box {
padding-left: clamp(12px, 3vw, 48px);
padding-right: clamp(12px, 3vw, 48px);
}
clamp()与calc()配合
首选值里还能嵌套calc()，实现更复杂的平衡控制：
/* 基础1rem，加上视口相关增量，整体限制在14px到40px */ font-size: clamp(14px, calc(1rem + 1.5vw), 40px);
注意事项
clamp()里三个参数都必须是同类型的长度或数值，不能把px和纯数字混用而不带单位。另外，当首选值用了vw这类视口单位，在用户缩放页面时浏览器会重新计算，不需要额外写媒体查询。
clamp()不是用来替换所有固定值的，而是用在那些确实需要在区间内弹性变化的场景，过度使用反而会让布局难以预测。
小结
通过 clamp(最小值, 首选值, 最大值) 这种写法，我们能用一行代码完成以前需要多个断点才能做的尺寸限制。它在字体、间距、容器宽度上的平衡控制非常实用，是写现代响应式页面时很值得熟练使用的工具。