clamp() 不能替代全部媒体查询，但能覆盖70%以上断点式响应需求；需用vmin替代vw防小屏过小、加固定偏移补偿衰减、统一单位、margin/padding配calc()实现线性过渡、fallback必须前置兼容旧版safari、不可嵌套calc()、不支持font-weight/color、不同层级元素需差异化参数。
clamp() 不能“免去”媒体查询，但它能替代其中 70% 以上用于字号、间距、宽高的断点式切换——前提是写对参数、加好 fallback、避开 Safari 的坑。
为什么直接写 clamp(1rem, 2vw, 1.5rem) 在 iPhone 上字会糊成一团
2vw 在 iPhone SE（375px）上只有 7.5px，远低于可读下限；而 clamp() 会老老实实取这个值，再被浏览器向下舍入到 7px —— 不是它不工作，是它按你写的算，只是你没给它兜底逻辑。
- 必须用
vmin替代vw：横屏时高度更小，vmin能防单行文字撑出可视区 - 首选值别裸写
2vw，要加固定偏移补偿小屏衰减，比如0.75rem + 0.4vmin - 三参数单位尽量统一（全用
rem或全用px），混用rem和vw没问题，但别掺em或%—— 它们会叠加父级缩放，失控
移动端 margin/padding 用 clamp() 必须配 calc() 线性公式
只写 margin: clamp(5%, 10vw, 15%) 看似省事，实际在 400px 宽度下是 20px，在 800px 下是 80px，中间不是线性过渡，而是“先跳变再拉伸”。真正平滑得靠数学映射。
- 先定两个锚点：比如希望 400px 时 margin 是 20px（即 5% × 400），800px 时是 120px（即 15% × 800）
- 推导出线性表达式：
calc(20px + 0.25 * (100vw - 400px))→ 简化为25vw - 80px - 再套进
clamp()：margin: 0 clamp(5%, 25vw - 80px, 15%) - 注意：这个
25vw - 80px只在 400–800px 区间有效，clamp()的上下限才是真正在两端兜底的
旧版 Safari 和 Android WebView 的 fallback 写法有硬性顺序要求
iOS 12.1 及更早版本、Android 4.4 的 WebView 完全不认识 clamp()，而且它们连 @supports 都不支持。如果 fallback 写在后面，整条声明会被忽略。
- 必须写成两行，且 fallback 在前：
font-size: 1.25rem; font-size: clamp(1rem, 0.75rem + 0.4vmin, 1.5rem); - 不能用
calc()嵌套在clamp()里（如clamp(1rem, calc(1rem + 1vmin), 1.5rem)），iOS 13.3 之前会渲染闪烁甚至空白 - 别指望
clamp()能处理font-weight或color—— 它们不接受数值插值，写了也无效
最常被忽略的一点：不同层级元素（h1 和 p）不能共用同一组 clamp() 参数。小屏时它们都会缩到下限，视觉层级就塌了——字号差可能只剩 2px，该有的呼吸感全没了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
