CSS clamp() 详解及案例

一、什么是 clamp()

clamp() 是 CSS 的一个数学函数，用于在最小值、理想值、最大值之间动态取值，常用于响应式布局。

clamp(最小值, 理想值, 最大值)

取值规则：浏览器会计算"理想值"，如果它小于最小值则取最小值，大于最大值则取最大值，否则取理想值。

可以理解为：max(最小值, min(理想值, 最大值))

二、语法与参数

clamp(MIN, VAL, MAX)

注意事项：

• 三个参数都可以是长度、百分比、计算表达式（calc() 可省略，直接写运算）。
• 结果会被限制在 [MIN, MAX] 区间内。
• 如果 MIN > MAX，则 MAX 会被忽略，最终取 MIN（等同 max(MIN, VAL)）。
• 现代浏览器全面支持（IE 不支持）。

三、核心原理图解

值
│
MAX ────────────────┐  ← 封顶
│                   │
│        ╱──────────┘
│      ╱  ← 理想值线性增长
│    ╱
MIN ┘───────────────  ← 保底
└──────────────────→ 视口宽度

四、常见案例

案例 1：响应式字号（流体字体）

h1 {
  /* 最小 1.5rem(24px)，最大 3rem(48px)，中间随视口增长 */
  font-size: clamp(1.5rem, 4vw, 3rem);
}

在 375px 手机上是 24px，在 1200px 桌面可达到 48px 封顶，中间平滑过渡。

案例 2：响应式容器宽度（配合百分比）

.container {
  /* 最小 320px，理想为 90% 视口宽，最大 1200px */
  width: clamp(320px, 90%, 1200px);
  margin-inline: auto;
}

案例 3：内边距自适应

.card {
  padding: clamp(1rem, 3vw, 2.5rem);
}

移动端间距小，大屏自动放大，但不过分。

案例 4：流式字号（线性插值，更精细）

让字号从视口 320px 时的 16px 线性增长到 1200px 时的 24px：

/* 斜率 = (24-16)/(1200-320) = 0.00909 → 0.909vw */
/* 截距 = 16 - 0.00909*320 ≈ 13.09px */
p {
  font-size: clamp(16px, calc(0.909vw + 13.09px), 24px);
}

这是 UI 设计中常用的"流体排版"公式。

案例 5：响应式间距系统

:root {
  --space-xs: clamp(0.5rem, 1vw, 0.75rem);
  --space-md: clamp(1rem, 2.5vw, 2rem);
  --space-lg: clamp(2rem, 5vw, 4rem);
}

.section {
  padding-block: var(--space-lg);
  gap: var(--space-md);
}

案例 6：限制图片/卡片尺寸

.avatar {
  width: clamp(48px, 10vw, 96px);
  height: clamp(48px, 10vw, 96px);
  border-radius: 50%;
}

案例 7：结合 min() / max() 的对比

/* 等价写法对比 */
width: clamp(300px, 50%, 800px);
/* 等价于 */
width: max(300px, min(50%, 800px));

五、clamp() vs min() / max()

clamp() 相当于 min() 和 max() 的组合，一步到位。

六、实用技巧与坑

1. 配合 vw 时注意缩放极限：纯 vw 在小屏会过小，大屏会过大，clamp() 正是为此而生。
2. 百分比依赖父元素：clamp(1rem, 50%, 3rem) 中的 50% 是相对父元素，需注意上下文。
3. 参数顺序不能反：MIN 和 MAX 写反时，MAX 失效。
4. 可用 calc() 嵌套：clamp(1rem, calc(1rem + 2vw), 3rem)。
5. 不支持 IE，但现代项目无需担心；可用 @supports 做降级。
6. 用于 font-size 时配合 rem 更利于无障碍（尊重用户根字号设置）。

七、完整示例

<!DOCTYPE html>
<html lang="zh">
<head>
<style>
  body {
    margin: 0;
    font-family: system-ui, sans-serif;
  }
  .hero {
    /* 高度随视口变化，限制在 300~600px */
    min-height: clamp(300px, 50vh, 600px);
    /* 流体内边距 */
    padding: clamp(1rem, 5vw, 4rem);
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
  }
  .hero h1 {
    /* 流体标题字号 */
    font-size: clamp(1.75rem, 5vw, 3.5rem);
    line-height: 1.2;
    margin: 0 0 clamp(0.5rem, 2vw, 1.5rem);
  }
  .hero p {
    font-size: clamp(1rem, 2vw, 1.25rem);
    max-width: clamp(280px, 80%, 720px);
  }
</style>
</head>
<body>
  <section class="hero">
    <h1>响应式流体排版</h1>
    <p>缩放浏览器窗口，观察文字与间距的平滑变化。</p>
  </section>
</body>
</html>

总结

clamp(最小值, 理想值, 最大值) 用一个声明就能实现上下限约束 + 流体过渡，是响应式设计中最实用的 CSS 函数之一。典型用途：流体字号、自适应容器宽度、响应式间距系统、图片尺寸限制。掌握它，可以大幅减少媒体查询的数量。