vw 的致命缺陷

.title {
  /* 字体大小永远是视口宽度的 5% */
  font-size: 5vw;
}

缺乏边界

在超大屏幕上，5vw 的字体会变得巨大无比；在极小的手机屏幕上，它又可能小到无法阅读。

clamp()

语法：clamp(MIN, PREFERRED, MAX)

• MIN：最小值，兜底值。
• PREFERRED：理想值，通常是基于 vw 的动态值。
• MAX：最大值，上限值。

例子：

.title {
    font-size: clamp(20px, 5vw, 50px)
}

一行代码，浓缩了以往可能需要三到四个媒体查询才能实现的功能，而且做得更好。

px 仍然是定义绝对、固定尺寸（如 border-width, box-shadow 的偏移量）的最佳选择。

rem 在一些不追求极致流体体验、更注重全局可访问性缩放的场景（如文档型网站、后台管理系统）中，依然是一个简单、可靠的方案。

然而，在面向消费者（To C）的、对视觉和体验要求极高的产品中，vw + clamp() 所代表的现代 CSS 布局方案，正凭借其无与伦比的流体体验、组件解耦能力和维护效率，成为新的行业标杆。

从 px 到 rem 再到 clamp() 的演进，不仅是 CSS 单位的更迭，更是前端开发理念的进化——从固定的像素点，到响应式的断点，再到如今的万物皆流体。