从 px 的“绝对统治”到 rem 成为响应式的默认方案，我们一度以为已经找到了完美答案。

但如果你最近翻过头部公司的前端代码库或设计系统，会注意到一个正在悄然发生的变化：px 与 rem 的使用显著减少，取而代之的是以 vw 与 clamp() 为代表的现代 CSS 方案。

这绝非跟风，而是一次范式迁移：响应式设计的理解，正从“在断点间切换”，进化为“在任意尺寸下连续过渡”。

拥抱真正的流体布局

前端的终极目标是更好的体验与更高的效率。rem 带来的“台阶式”体验与高维护成本，愈发难以满足诉求；围绕 vw 与 clamp() 的新方法因此走到台前。

1. vw（视口宽度单位）：天生流体

vw 与视口直接绑定：1vw 等于视口宽度的 1%。也就是说，当浏览器窗口拉伸或收缩时，元素尺寸会实时、平滑、连续地跟随变化。

.title {
  /* 字号始终为视口宽度的 5% */
  font-size: 5vw;
}

这一行实现的视觉顺滑，是 rem + 媒体查询 很难复制的：线性缩放，无需断点跳变。

但 vw 的致命缺点也很明显：没有边界。超大屏上 5vw 会让文字离谱地大；极小屏上又可能小到难以阅读。

2. clamp()：优雅的边界控制，“流体 + 护栏”的终局解

clamp() 的出现，正是为了解决 vw 的边界问题。你可以把它理解为一个“夹具”，把动态值钳在最小值与最大值之间。

语法：clamp(MIN, PREFERRED, MAX)

• MIN：最小保底（可读性/可触达性兜底）
• PREFERRED：理想值（通常用 vw 表达）
• MAX：最大封顶（避免大屏失控）

把上面的例子改写为 clamp()：

.title {
  /*
   * 理想大小是 5vw，但
   * 不低于 20px（小屏可读性）
   * 不高于 50px（大屏避免夸张）
   */
  font-size: clamp(20px, 5vw, 50px);
}

这一行顶过去三四个媒体查询，而且效果更稳、更连贯。

px / rem 还该在哪里登场？

• px 仍然是绝对固定尺寸的最佳选择（如 border-width、box-shadow 偏移等）。
• rem 在不强调流体、但更看重全局可访问性缩放的场景依旧可靠（如文档型站点、后台管理）。

然而，在强调视觉细腻度与用户体验的 To C 产品里，代表“现代流体布局”的 vw + clamp() 正在快速成为新共识：它带来更顺滑的体验、更低的耦合与更省心的维护。

从 px → rem → clamp()：一次前端观念的进化

这不只是单位的替换，而是理念的升级：

从固定像素，到响应式断点，到如今的全程流体。 在任何屏幕上，尺寸与排版更自然地随环境变化——这，正是新一代 CSS 的价值所在。

阅读原文：原文链接