CSS clamp()：流式字号、min() 和 max()

clamp() 的作用

clamp(MIN, PREFERRED, MAX) 接收三个值，只要中间的值处于另外两个值之间，就返回中间的值。最经典的用法是让标题随屏幕变大，但停在合理的界限上，而且不需要媒体查询：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clamp</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    h1 {
      font-size: clamp(1.5rem, 1rem + 3vw, 3rem);
      margin: 0 0 8px;
      color: #111827;
    }
  </style>
</head>
<body>
  <h1>Fluid heading</h1>
  <p id="out"></p>
  <script>
    const show = () => {
      document.getElementById('out').textContent =
        'Preview width ' + innerWidth + 'px, heading font-size ' + getComputedStyle(document.querySelector('h1')).fontSize;
    };
    addEventListener('resize', show);
    show();
  </script>
</body>
</html>

首选值是 1rem + 3vw：16px 加上宽度的 3%。在 800px 宽的预览中，结果是 16 + 24 = 40px，处于 24px（1.5rem）和 48px（3rem）之间，所以标题是 40px。在 320px 宽的手机上，首选值是 25.6px。超过 1067px 后它会大于 48px，所以停在 48px。调整窗口大小就能看到数字变化；这里的 vw 是预览框宽度的百分比。

不用调整窗口也能看到效果

vw 跟随视口变化，而阅读时你很难改变视口大小。容器查询单位则跟随容器变化：cqi 是容器宽度的 1%。拖动滑块改变盒子的大小，同样写法的 clamp() 就会随之响应：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clamp with a slider</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .box { container-type: inline-size; background: #e5e7eb; padding: 12px; margin-top: 10px; box-sizing: border-box; }
    .title { font-size: clamp(1.25rem, 0.5rem + 6cqi, 2.5rem); font-weight: 700; margin: 0; }
  </style>
</head>
<body>
  <label>box width <input id="w" type="range" min="200" max="760" value="480"></label>
  <div class="box" id="box"><p class="title">Resizable title</p></div>
  <p id="out"></p>
  <script>
    const box = document.getElementById('box');
    const title = document.querySelector('.title');
    const update = () => {
      box.style.width = document.getElementById('w').value + 'px';
      const size = parseFloat(getComputedStyle(title).fontSize);
      const note = size <= 20 ? ' (at MIN)' : size >= 40 ? ' (at MAX)' : ' (preferred value)';
      document.getElementById('out').textContent = 'box ' + box.offsetWidth + 'px: font-size ' + size.toFixed(1) + 'px' + note;
    };
    document.getElementById('w').addEventListener('input', update);
    update();
  </script>
</body>
</html>

滑到最左边，标题停在 20px（MIN）。滑到最右边，标题停在 40px（MAX）。在两者之间，它跟随 0.5rem + 6cqi 变化。这和 vw 版本是同一个机制，只是换了一把更短的尺子。

三个参数

font-size: clamp(1rem, 0.8rem + 1vw, 1.5rem);
/*               MIN   PREFERRED     MAX    */

每个参数里都可以直接做计算，不用写 calc()：1rem + 2vw 原样写就可以。+ 和 - 的两边都要有空格，否则整条声明都无效。

如果 MIN 大于 MAX，MIN 优先：clamp(3rem, 5vw, 2rem) 永远是 3rem。

计算中间的值

要让字号在 320px 的屏幕上是 16px，在 1280px 的屏幕上增长到 24px：

1. 斜率：(24 − 16) ÷ (1280 − 320) = 8 ÷ 960 = 0.00833，也就是 0.833vw（vw 以每 100px 为单位）。
2. 起点：16px − 0.00833 × 320px = 13.33px，也就是 0.833rem。
3. 在两边加上界限：

font-size: clamp(1rem, 0.833rem + 0.833vw, 1.5rem);

宽度为 320px 时结果是 13.33 + 2.67 = 16px，宽度为 1280px 时结果是 13.33 + 10.67 = 24px，超出这个范围就停在界限上。网上的“clamp 计算器”做的正是这个运算。

min() 和 max()

clamp() 是两个更简单的函数的组合：

• min(a, b) 返回较小的值，所以它设置的是上限。
• max(a, b) 返回较大的值，所以它设置的是下限。
• clamp(MIN, VAL, MAX) 等同于 max(MIN, min(VAL, MAX))。

这两个名字一开始会让人觉得是反的：想表达“最多 600px”，要用 min()。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>min and max</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .card {
      width: min(100%, 420px);          /* full width, but at most 420px */
      padding: max(12px, 3%);           /* at least 12px */
      margin-bottom: 10px;
      background: #2563eb;
      color: white;
      box-sizing: border-box;
    }
    .narrow { width: 260px; }
  </style>
</head>
<body>
  <div class="card" id="a">In the full preview</div>
  <div class="narrow"><div class="card" id="b">In a 260px parent</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = ['a', 'b'].map((id) => {
      const el = document.getElementById(id);
      return id + ': width ' + el.offsetWidth + 'px, padding ' + getComputedStyle(el).paddingTop;
    }).join('  |  ');
  </script>
</body>
</html>

在宽预览中，第一张卡片停在 420px。在 260px 宽的父元素中，100% 是较小的值，所以第二张卡片是 260px。max(12px, 3%) 让第一张卡片得到父元素宽度的 3%（父元素是 body：在 800px 的预览中约为 23.5px），而第二张卡片得到 12px，因为 260px 的 3%（7.8px）低于下限。

width: min(100%, 420px) 用一条声明取代了旧的两条写法 width: 100%; max-width: 420px;。

不只是字号：间距和宽度

clamp() 可以用在任何接受长度的属性中。在中间的值里使用百分比，组件就会相对父元素流动变化，而不是相对视口：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clamp spacing</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .parent { background: #e5e7eb; margin-bottom: 10px; }
    .card {
      width: clamp(200px, 80%, 520px);  /* 80% of the parent, within limits */
      padding: clamp(10px, 5%, 32px);   /* % padding is relative to the parent's width */
      box-sizing: border-box;
      background: #16a34a;
      color: white;
    }
  </style>
</head>
<body>
  <div class="parent" style="width: 300px"><div class="card">In a 300px parent</div></div>
  <div class="parent" style="width: 760px"><div class="card">In a 760px parent</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = [...document.querySelectorAll('.card')]
      .map((c) => c.offsetWidth + 'px wide, padding ' + getComputedStyle(c).paddingTop).join('  |  ');
  </script>
</body>
</html>

在 300px 宽的父元素中，卡片宽 240px（80%），内边距是 15px（300px 的 5%）。在 760px 宽的父元素中，80% 会是 608px，所以卡片停在最大值 520px；760px 的 5% 是 38px，所以内边距停在 32px。

无障碍：中间的值要保留 rem

只用 vw 写的字号，例如 font-size: 5vw，在读者调大浏览器设置中的默认字号时不会变大，在浏览器缩放时也不会变大，因为缩放会让视口在 CSS 像素上变窄。加入 rem 部分（1rem + 2vw）并用 rem 作界限，文字就会跟随读者的设置。单位页面详细讲解了 rem 和 vw。

常见错误

• 用 min() 设置最小值。 min() 选的是较小的值，也就是上限。要表达“至少 12px”，用 max(12px, ...)。
• + 或 - 两边没有空格。 clamp(1rem, 1rem+2vw, 3rem) 是无效的，属性会退回到之前的值。
• 中间只用 vw。 这样文字会忽略读者设置的字号。加上一个 rem 项。
• MIN 大于 MAX。 结果永远是 MIN，这通常不是你想要的。
• 字号的界限用 px。 即使读者需要更大的字，它也会把文字限制住。请用 rem。