clamp()：给响应式布局加上护栏
用了很久的响应式设计，到头来发现纯相对单位那套玩法，在真实项目里很容易翻车。
当年在 Vue 项目里把字号设为 0.3vw，想着一次适配所有屏幕。确实，不同尺寸的显示器上文字块宽高比很统一，大屏不折行，小屏不拥挤，初期体验挺不错。
但多端一跑问题就出来了。16 寸笔记本上设置好的 0.3vw，到 27 寸大屏上字变得异常大，间距拉得空旷；换到小尺寸笔记本或超宽带鱼屏，又会挤得难受。全局响应式设计最大的坑就在这儿：你在特定区间调好的比例，换一个视口就可能崩。最终只能保证模块不重叠，观感根本谈不上协调。
回到 px + @media 的怀抱是大多数人最后的妥协。固定像素保证美观，断点适配不同设备，这是标配方案。代价是样式文件迅速膨胀成补丁堆。每次改一个元素的字体，得顺着好几个断点检查一遍，生怕牵一发动全身。维护久了，连自己都不想打开那个 CSS 文件。
Tailwind 之类工具类框架看似改善了开发体验，但响应式的核心矛盾没变，还要额外记住一套断点前缀：sm (640px)、md (768px)、lg (1040px)、xl (1280px)、2xl (1536px)。写起来爽，后期调整样式时，依旧要在不同前缀间反复取舍。
这种两难让我一直在找有没有既能自动伸缩，又能控制边界的办法。
clamp()：区间自适应
后来接触到了 CSS 的 clamp() 函数，感觉像是专门为这个场景设计的。
语法很简单：
font-size: clamp(16px, 2vw, 24px);
意思是：取 2vw，但永远不小于 16px，也不大于 24px。一上来就把响应式的灵活和像素的安全边界揉在了一起。
对比以前的方案，clamp() 有几个看得见的好处：
- 自动伸缩：不必手动定义断点，视口变化时数值线性变化。
- 边界可控：通过最小最大值避免极端效果，不会让字号或间距失去比例感。
- 一行解决：以往需要多组 @media 才能实现的逻辑，现在一个函数搞定。
- 可读性好：
clamp(min, ideal, max)的语义比掺杂多种单位的 calc 表达式直观。 - 主流浏览器全兼容：Chrome 79+、Firefox 75+、Safari 13.1+ 均已支持。
几个实际场景
标题字号
之前用 3vw 设置大标题，27 寸屏上大到仿佛广告牌，13 寸屏上又显得干瘪。使用 clamp() 后：
.title {
font-size: clamp(20px, 3vw, 40px);
}
小屏下保持至少 20px，大屏下不超过 40px，视觉平衡一下子出来了。
布局容器宽度
想做一个内容区最大到 1200px，但窄屏时不希望出现横向滚动条：
.container {
width: clamp(300px, 80vw, );
: auto;
}
