CSS 数学函数clamp()，主要是应用在字体大小、间距、尺寸等属性的自适应效果中，它可以设置动态变化的值。

一、clamp() 语法解析

font-size: clamp(最小值, 理想值, 最大值);最小值‌是允许的最小值，理想值‌是动态变化的相对值，最大值‌是允许的最大值。实现的效果是字体大小会随着视口宽度变化，但永远不会小于最小值或超过最大值。

二、举例
span {  font-size: clamp(1.5rem, 3vw + 1rem, 3rem);}，如果根字体大小是16px，那么span的值会在24px和48px之间随视口宽度而改变。

三、比例计算

理想值 = (最大字体 - 最小字体) / (最大视口 - 最小视口) * 100vw + 修正值
比如：最小字体 24px（375px 宽度），最大字体 48px（1920px 宽度）变化值：(48 - 24) / (1920 - 375) = 24 / 1545 ≈ 0.0155 → 1.55vw  修正值： 24px - (0.0155 * 375) = 24 - 5.8125 = 18.1875px → 1.137rem。最终font-size: clamp(1.5rem, 1.55vw + 1.137rem, 3rem);

四、clamp() 优势及弊端
使用clamp() 实现响应式，代码比较简洁，维护方便，同时过度比较平滑，无需设置断点，自动连续变化‌。但需要提前设计和计算数值。而且clamp() 缺乏媒体查询的精度，特别是需要精确控制特定屏幕尺寸的布局变化时，clamp() 并不适合，尤其是在一致性和可预测性是关键的设计系统中，最好用媒体查询来解决。