clamp() 函数

clamp() 是 CSS 提供的一个强大的函数，用于在设置样式时限定一个值的最小值、理想值和最大值。它是响应式设计中非常实用的工具，尤其适用于字体大小、元素尺寸、间距等。

1. 语法结构

clamp(min, preferred, max)

含义如下：

• min：最小值
• preferred：理想值（通常为百分比或 vw）
• max：最大值

浏览器将根据视口宽度，在 min 和 max 之间取最接近 preferred 的值。

示例：字体大小自动调整

h1 {
  font-size: clamp(20px, 4vw, 36px);
}

在小屏幕时最小 20px，随着视口放大最大不超过 36px。

2. 应用场景

• 自适应字体大小
• 自适应布局间距
• 图片或容器尺寸限制

clamp() 函数示例

loading