“老板，这里 320px 太小了，768px 又太大，能不能随屏幕优雅地‘伸缩’？”
“好嘞，加个clamp()，让字号像水一样流动！”
一、什么是 clamp()？
一句话：“夹心饼干”式取值
属性: clamp(最小值, 首选值, 最大值);
浏览器会在【最小值 ≤ 首选值 ≤ 最大值】之间动态计算，首选值通常是一个“会动的”表达式（vw、%、rem 等）。
二、实战 1：标题字号“黄金流体”
需求：
- 屏幕 375px 时字号 1.5rem
- 屏幕 1440px 时字号 3rem
- 中间线性伸缩
🔮 一行代码解决
h1 {
font-size: clamp(1.5rem, 1rem + 2vw, 3rem);
}
| 屏幕宽 | 计算过程 | 结果 |
|---|---|---|
| 375px | 1 + 2×0.234 | ≈1.47 → 1.5rem |
| 1440px | 1 + 2×0.9 | ≈2.8 → 3rem |
| 800px | 1 + 2×0.5 | 2rem |
无需媒体查询，字号像水一样流动！
三、实战 2：卡片宽度“弹性盒子”
需求：
- 最小 250px，最大 400px，中间随容器变化
.card {
width: clamp(250px, 50% - 2rem, 400px);
}
- 当父容器 600px 时：50% - 2rem = 300px → 取 300
- 父容器 900px 时：50% - 2rem = 450px → 被 clamp 到 400
四、实战 3：按钮内边距“自适应呼吸”
.btn {
padding: clamp(.75em, 1em + .5vw, 1.5em) clamp(1.5em, 2em + 1vw, 3em);
font-size: 1rem;
}
- 小屏：按钮更紧凑
- 大屏：按钮更大气
五、进阶技巧：不依赖媒体查询的“响应式网格”
.grid {
display: grid;
gap: clamp(.5rem, 1vw, 1.5rem);
grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 20vw, 250px), 1fr));
}
- 列宽在 150-250px 间优雅伸缩
- gap 也随屏宽变化
六、兼容 & 工具
| 浏览器 | 支持情况 |
|---|---|
| Chrome/Edge | ✅ 79+ |
| Safari | ✅ 13.1+ |
| Firefox | ✅ 75+ |
在线计算器：
clamp.font-size.app 输入最小/最大/断点，自动生成 clamp() 公式！
七、面试一句话回答
“当需要元素在某个区间里线性响应时，用
clamp()比媒体查询更简洁优雅。
核心是把【首选值】写成min + (max - min) * (100vw - minW) / (maxW - minW)的线性表达式，让浏览器自动夹。”
🏁 结语
clamp() 就像 CSS 界的瑞士军刀：
- 一行顶 N 行媒体查询
- 字号、间距、宽高全场景通杀
- 性能更好（浏览器原生计算）
下次设计师再甩你 5 套断点，你只需要回一句：
“不用切图，我用 clamp() 让它自己长！”
