clamp() 不是替代媒体查询，而是通过插值实现字号等属性随视口连续平滑变化，避免跳变；需用 vmin 防横屏溢出，必须加 fallback 降级，禁用嵌套与相对单位，各层级应独立设置参数。
clamp() 不是“替代媒体查询”，而是解决它解决不了的问题：平滑过渡、避免跳变、减少维护成本。它在移动端适配中真正不可替代的地方，是让字号、间距、容器尺寸能随视口连续变化，而不是在几个断点间硬切。
clamp() 的工作逻辑不是“切换”，而是“插值”
它本质是 max(minimum, min(ideal, maximum))，浏览器实时计算，不依赖断点触发。这意味着拖动窗口时，font-size 或 margin 是线性变化的，不会出现传统 @media 下的“咔哒”跳变。
- 小屏下
4vw算出来是 18px，但你设了clamp(16px, 4vw, 24px)→ 实际取 18px - 再缩到 iPhone SE（375px 宽），
4vw = 15px→ 小于下限 16px → 自动 fallback 到16px - 拉宽到 2560px，
4vw = 102.4px→ 超过上限 24px → 取24px
移动端必须用 vmin 而不是 vw 的真实原因
横屏时，vw 按屏幕宽度算，但高度可能极小（比如 iPhone 13 横屏宽 844px，高仅 390px），纯 vw 会让单行文字撑出可视区。而 vmin 取宽高中的较小值，天然防溢出。
- 标题安全写法：
font-size: clamp(24px, 6vmin, 48px) - 正文更稳：
font-size: clamp(14px, 4vmin, 20px) - 千万别写
clamp(16px, 2vw, 24px)在横屏小设备上——2vw按 844px 算是 16.88px，仍大于 16px，下限根本没生效
不加 fallback 的 clamp() 在旧版 Safari 上等于没写
iOS 12.1 及更早、Android 4.4 等系统完全不识别 clamp()。如果只写一行：font-size: clamp(16px, 4vmin, 20px);，这些浏览器会直接忽略整条声明，退回到继承的 font-size，可能小到 10px 或大到 32px，彻底失控。
- 正确写法必须带降级：
font-size: 16px; font-size: clamp(16px, 4vmin, 20px); - 注意顺序：fallback 值必须写在
clamp()前面，否则被覆盖 - 不要用
@supports (font-size: clamp(...))包裹——iOS 12.1 连@supports都不支持
嵌套 clamp() 或混用 em/% 会失效
目前所有主流浏览器都不支持 clamp(clamp(...), ..., ...)，解析直接失败。另外，首选值若用 em 或百分比，会叠加父元素字体大小，导致缩放失真——尤其在多层嵌套组件中，误差会被放大。
- 错误示例：
font-size: clamp(1rem, 1.2em, 1.5rem)→1.2em依赖父级，不可控 - 推荐组合：
clamp(14px, calc(1rem + 0.5vmin), 20px)—— 用calc()加固定偏移，防超小屏过小 - 层级缩放要独立参数：
h1和p不能共用同一组clamp()，否则小屏时比例坍塌（比如都缩到下限，差值只剩 2px）
真正麻烦的不是写对 clamp()，而是验证它在各种极端屏下是否真的守住了上下限——尤其是 iPhone SE 横屏、折叠屏半开态、iPad 分屏这些场景，数值得实测，不能只靠公式推演。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
