clamp() 比 rem + 媒体查询更直接，因其一行 CSS 即可定义最小值、首选值、最大值三态，由浏览器自动线性插值计算，无需断点或 JS 监听 resize。
clamp() 在移动端文字自适应中为什么比 rem + 媒体查询更直接
因为 clamp() 用一行 CSS 就能定义「最小值、首选值、最大值」三态，浏览器自动插值计算，不需要写一堆 @media 断点或 JS 监听 window.resize。它本质是 CSS 的线性插值函数，不是“响应式开关”，而是“连续响应”。
常见错误现象：把 clamp(16px, 2vw, 24px) 写成 clamp(16px, 2vw, 24px) 却发现小屏文字没缩到 16px——问题往往出在 2vw 在超小屏（比如 iPhone SE）下实际值仍大于 16px，没触发下限。这时候得调低中间项系数，或改用 min(24px, max(16px, 4vw)) 更可控。
- 首选值建议用视口单位（
vw、vmin），避免用em或百分比，否则会叠加继承影响 - 移动端优先用
vmin而非vw：横屏时vmin取宽度和高度中更小者，防止单行文字撑出屏幕 - 不要嵌套
clamp()，目前所有主流浏览器都不支持
如何用 clamp() 实现标题与正文的层级自适应
标题和正文不能共用同一组 clamp() 参数，否则视觉层级会坍塌。关键在于让字号差距始终可感知，即使在极端尺寸下。
使用场景：一个页面同时有 h1、p、small，需要它们随屏幕等比缩放但保持相对大小关系。
立即学习“前端免费学习笔记（深入）”；
-
h1：用clamp(24px, 6vmin, 48px)—— 下限保可读，上限防溢出，vmin确保横竖屏都稳 -
p：用clamp(14px, 4vmin, 20px)—— 中间项系数比h1小一半，维持约 1.5 倍比例感 -
small：用clamp(12px, 3vmin, 16px)—— 注意下限不能低于 12px，否则 iOS Safari 渲染模糊
性能影响几乎为零，clamp() 是纯 CSS 计算，不触发布局重排，比 JS 动态改 font-size 轻量得多。
兼容性兜底：当 clamp() 不被支持时怎么降级
Android 4.4–、iOS 12.1–、旧版 Safari 都不支持 clamp()。不能只写 clamp()，必须前置 fallback 值。
错误写法：font-size: clamp(16px, 4vmin, 20px); —— 旧浏览器直接忽略整条声明，退回到继承值，可能极小或极大。
正确写法（按声明顺序）：
font-size: 16px; font-size: clamp(16px, 4vmin, 20px);
这样旧浏览器取第一行，新浏览器覆盖为第二行。注意：不能反过来，CSS 解析是顺序覆盖，不支持条件判断。
- 不要试图用
@supports (font-size: clamp(...))包裹，iOS 12.1 虽不支持clamp()却错误地报告支持，导致兜底失效 - 如果项目需支持 iOS 12，建议统一用
rem+ JS 动态根字体，clamp()仅作增强
为什么在 flex 或 grid 容器里文字缩放会“卡住”
这不是 clamp() 的问题，而是父容器约束了子元素的可用空间，导致视口单位计算失真。例如 flex: 0 0 300px 的卡片内文字用 4vw，实际只按整个屏幕宽算，但内容却被压在 300px 里，视觉上就“缩不动”。
解决思路不是改 clamp()，而是换参考单位或加约束：
- 把
vw换成%或em，前提是父容器有明确字号（比如设了font-size: 16px） - 对容器加
min-width: 0（flex item）或overflow-wrap: break-word，防止内部文本强行撑宽 - 极端情况可改用
transform: scale()配合transform-origin，但会模糊文字，仅作最后手段
真正难的从来不是写对 clamp()，而是搞清它算的是哪个“视口”、受哪些祖先样式抑制、以及用户到底在什么设备上真正看到它生效。
