px 是我们熟悉且常用的 CSS 单位，但在如今这个设备屏幕尺寸千差万别的时代，px 似乎不再像以前那么好用。

分享一个强大的 CSS 新特性，它将改变我们编写响应式样式的方式，让我们告别繁琐的媒体查询，轻松实现流畅的“流体式”布局。

px 的问题

px 是一个绝对单位，它代表屏幕上的一个物理像素点，这意味着 width: 300px; 在任何设备上都会试图渲染成 300 个像素点宽。

为了解决不同尺寸设备渲染的问题，传统的做法是使用大量的媒体查询（@media）：

.title {
 font-size: 48px;
}

@media (max-width: 768px) {
 .title {
    font-size: 32px;
  }
}

@media (max-width: 480px) {
 .title {
    font-size: 24px;
  }
}

仅为了一个字体大小，就写了这么多代码。如果再加上 padding、margin、width… 代码会变得臃肿不堪，难以维护。更重要的是，这种“阶梯式”的调整是不连贯的，在断点之间，布局仍然是僵硬的。

CSS 数学函数 clamp()

clamp() 的语法非常简单：clamp(MIN, PREFERRED, MAX)。

浏览器会首先尝试使用 PREFERRED 值，如果 PREFERRED 值小于 MIN，则采用 MIN 值，反之，则采用 MAX 值。

流体式字体排版

让我们用 clamp() 来重写刚才的字体大小示例：

.title {
  /* clamp(最小值, 首选值, 最大值) */
  font-size: clamp(1.5rem, 5vw, 3rem);
}

让我们来解读一下这行代码的魔力：

• 1.5rem (最小值)：在非常窄的屏幕上（如手机），字体大小最小为 1.5rem（约 24px），保证可读性
• 5vw (首选值)：字体大小根据视口宽度进行动态缩放，5vw 意味着字体大小是视口宽度的 5%。当用户缩放浏览器窗口时，字体会如丝般顺滑地变大或变小
• 3rem (最大值)：在非常宽的屏幕上（如 4K 显示器），字体大小最大为 3rem（约 48px），保持美观

最终，字体大小会在 24px 到 48px 之间根据屏幕宽度平滑地过渡，不再有断点之间的跳变，这是真正的“流体式”设计！

clamp()在布局中的应用

clamp() 的威力远不止于此，我们可以将它应用到任何需要动态调整的地方：

例如我们想让一个内容区块的宽度自适应，但又不想它在小屏幕上太窄，或在大屏幕上太宽？

.container {
  width: clamp(320px, 90%, 1200px);
  margin: 0 auto;
}

• 在小屏幕上，宽度是 90%，但最小不会低于 320px
• 在超大屏幕上，宽度也是 90%，但最大不会超过 1200px

是时候从 px 的思维定势中解放出来了，clamp() 这个现代 CSS 特性，并不是什么遥不可及的黑科技，它们的浏览器兼容性已经非常好（主流浏览器早已支持）。