出处：掘金

原作者：ErpanOmer

我们做前端的，为了让网站在不同设备上都好看，天天都在和“响应式”打交道。其中最常见的一个场景，就是处理字体大小

通常，我们是这么做的：

/* 手机上是16px */
h1 {
  font-size: 16px; 
}

/* 平板上大一点 */
@media (min-width: 768px) {
  h1 {
    font-size: 24px;
  }
}

/* 电脑上再大一点 */
@media (min-width: 1200px) {
  h1 {
    font-size: 32px;
  }
}

这套代码能用，但它有一个问题：字体大小的变化，是“跳跃式”的，像在走楼梯。当你的屏幕宽度从 767px 变成 768px 时，字体会“Duang”地一下突然变大。这种体验，不够平滑

今天，我想聊一个能让我们告别大部分这种繁琐媒体查询的 CSS 函数：clamp()。它能让我们的元素尺寸，像在走一个平滑的斜坡一样，实现真正的 “流体式”缩放

clamp() 是啥

clamp() 的中文意思是“夹子”或“钳子”，非常形象。它的作用就是把一个值的范围，“夹”在一个最大值和一个最小值之间

它的语法极其简单：

width: clamp(最小值, 理想值, 最大值);

Pasted image 20260407111920.png

可以把它理解成，你在设定一个规则：

  1. 最小值 (MIN)：这是“下限”。不管怎么样，这个值都不能比它更小了
  2. 最大值 (MAX)：这是“上限”。不管怎么样，这个值都不能比它更大了
  3. 理想值 (IDEAL)：这是“首选值”。它通常是一个根据视口变化的相对单位，比如 vw。浏览器会先尝试使用这个值

它的工作逻辑是：

使用场景

流体字号（Fluid Typography）

这是 clamp() 最经典，也是最强大的用途。我们来改造一下文章开头的那个例子

以前（媒体查询版）：

h1 { font-size: 16px; }
@media (min-width: 768px) { h1 { font-size: 24px; } }
@media (min-width: 1200px) { h1 { font-size: 32px; } }

现在（clamp() 版）：

h1 {
  /* 最小值是 16px，
    理想值是视口宽度的 4%，
    最大值是 32px
  */
  font-size: clamp(16px, 4vw, 32px);
}

看，一行代码，代替了原来的一堆媒体查询

现在你拖动浏览器窗口，会发现标题的大小是在平滑地、线性地变化，而不是“阶梯式”地跳变。它在小屏幕上不会小于 16px，在大屏幕上不会大于 32px，而在中间的尺寸，它会根据 4vw 这个值自动调整

动态间距（Dynamic Spacing）

clamp() 不仅仅能用在 font-size 上，任何需要长度值的地方，比如 margin , padding , gap，它都能大显身手

我们可以用它来创建一个“呼吸感”更强的布局

.grid-container {
  display: grid;
  /* 网格间距最小 15px，最大 40px，中间根据视口宽度 5% 来缩放 */
  gap: clamp(15px, 5vw, 40px);
}

.section {
  /* section 的上下内边距，最小 20px，最大 100px */
  padding-top: clamp(20px, 10vh, 100px);
  padding-bottom: clamp(20px, 10vh, 100px);
}

这样做的好处是，你的布局在任何尺寸的屏幕上，都能保持一个和谐的、自适应的间距，不再需要为不同断点去写多套 padding 和 gap 的值

结合 calc() 实现更精准的控制

有时候，我们不希望缩放是纯线性的 vw，而是希望它有一个“基础值”，然后再根据 vw 去微调。这时候，clamp() 可以和 calc() 结合使用

h1 {
  /* 理想值不再是单纯的 3vw，
    而是 1rem + 3vw
    这意味着它有一个 1rem 的基础大小，然后再叠加上与视口相关的部分
  */
  font-size: clamp(1.5rem, calc(1rem + 3vw), 3rem);
}

这个 calc(1rem + 3vw) 的公式，是一个非常流行和实用的流体排版计算方法。它能让你对字体大小的缩放速率有更精细的控制，是一个非常值得收藏的技巧

兼容性

好消息是，在 2025 年的今天，clamp() 已经在所有主流现代浏览器（Chrome, Firefox, Safari, Edge）中获得了良好支持。除非你的项目需要兼容非常古老的浏览器，否则完全可以放心在生产环境中使用

参考