从 vw/vh 到 clamp()：前端响应式设计的痛点与演进
一、原生响应式设计的痛点
1. vw/vh/% 的蜜月期与矛盾点
作为一名长期从事前端与全栈开发的工程师，我曾经深信'响应式设计'是前端布局的终极解法。于是我在 Vue 项目中大量使用了 vw、vh、% 等相对单位，期望一套布局能在所有设备上自然伸缩。尤其是首页大屏的文字，可以使用 vw 设置字号和外层容器宽度，来实现不同屏幕下一行文字数量相同的效果，初期体验确实不错。
font-size: 0.3vw;
但这种设计存在一个致命问题：如果在 16 寸笔记本上显示合理，一切看起来都很完美，那么在 27 寸显示器上文字就会巨大得夸张、间距极度拉大，显得很不协调。而在一些更小尺寸的笔记本、平板或超宽屏显示器上，整个布局又会显得拥挤或极度分散。
局部响应式设计的好体验会在全局响应式设计中'失真'、'失活'，最终两边都不讨好。 它往往只能满足模块不相互重叠、不挤占空间的底线要求，这与 Flex 布局相比并无明显优越性。
2. px + @media 的维护困境
在苦求无解后，我回到了 px 固定尺寸的怀抱，再用 @media 针对不同分辨率做细粒度适配。这也是 CSS 高级教程中常见的成熟方案：通过 px 给出合适美观的元素内容和留白，再通过 @media 识别设备视口宽度，针对不同场景输出对应的 CSS。
但这带来了新的痛点：@media 规则暴增，维护成本极高；每次改动一处样式，都要担心破坏其他元素的布局；项目规模稍大，样式文件就像'层层叠叠的补丁堆'，可读性差。而且业务方通常不会考虑维护多断点所需的时间，只会质疑为何简单需求的维护周期如此之长。
后来接触 Tailwind CSS 后，开发体验虽有提升，但响应式适配依然繁琐，需要依赖断点映射表：
| 前缀 | 最小宽度 | CSS 等效 |
|---|---|---|
sm | 640px | @media (min-width: 640px) |
md | 768px | @media (min-width: 768px) |
lg | 1024px | @media (min-width: 1024px) |
