clamp()实现平滑字号缩放，现代浏览器全覆盖，旧版需fallback；它通过实时插值替代媒体查询的硬切跳变，适用于连续量如字号、行高，min值防小屏过小，vmin防横屏溢出，viewport设置是前提。
因为它能用一行声明实现平滑、连续、免断点的字号缩放，且现代移动端浏览器支持已全覆盖（Safari 13.1+、Chrome 79+、Firefox 75+），而旧版 fallback 也足够简单可靠。
clamp() 不是“替代媒体查询”，而是解决它解决不了的问题
媒体查询在 480px、768px 等断点硬切字号，拖动窗口时文字会“咔哒”跳变；clamp() 是实时插值：浏览器每帧都算一次 max(min, min(preferred, max))，字号随视口宽度线性变化。比如 font-size: clamp(16px, 2.5vw, 24px) 在 375px → 414px → 768px 下，计算出的字号分别是 16px → 17.2px → 21.6px，肉眼可见更自然。
- 真正需要断点控制的（如隐藏导航栏、切换布局结构），仍得用
@media -
clamp()只管“连续量”：字号、行高、内边距、容器宽高等可插值属性 - 混用时推荐分工：
@media控制显示/隐藏、clamp()控制尺寸缩放
为什么小屏下常“不动”？不是函数失效，是 vw 算出来低于 min
例如 iPhone SE（320px）上，2.5vw = 8px，而 clamp(16px, 2.5vw, 24px) 会直接取 16px —— 这不是 bug，是设计行为。iOS Safari 还有默认最小字体 16px 的强制策略，设 14px 会被忽略。
- min 建议写
16px或1rem（前提是:root设了font-size: 16px） - 首选值别裸用
vw，加偏移更稳：calc(1rem + 0.5vw)或2.2vw + 0.5rem - 测试必须真机或 DevTools 拖到 320px/375px/414px，看 computed
font-size是否真在变
不加 fallback 时，旧版 Safari 直接忽略整条声明
iOS 13.0 及更早、Android WebView 4.4–6.0 完全不识别 clamp()。如果只写 font-size: clamp(16px, 4vmin, 20px);，这些环境会退回到继承值，可能小到 10px 或大到 32px，完全失控。
- 降级必须写两行，且 fallback 在前：
font-size: 16px;然后font-size: clamp(16px, 4vmin, 20px); - 别用
@supports (font-size: clamp())包裹——iOS 12.1 连@supports都不支持 - 禁用嵌套：
clamp(clamp(), , )或混用em/%会导致解析失败
vmin 比 vw 更适合标题，但正文慎用
横屏时 vw 按屏幕宽度算（iPhone 13 横屏宽 844px），但高度仅 390px，纯 vw 易让单行文字撑出可视区。vmin 取宽高较小值，天然防溢出。
- 标题安全写法：
font-size: clamp(24px, 6vmin, 48px) - 正文慎用
vmin：竖屏时vmin= 高度，而手机高度远大于宽度（如 812px），4vmin在 iPhone X 竖屏下 ≈ 32px，过大 - 正文更推荐：
clamp(14px, calc(1rem + 0.4vw), 18px)，兼顾小屏可读与大屏克制
真正容易被忽略的，是 clamp() 的效果强依赖 viewport 环境：用户双指放大、系统字体缩放、第三方浏览器兼容层，都会让 vw 行为偏离预期。别一上来就调参数，先确认 <meta name="viewport" content="width=device-width, initial-scale=1"> 是否完整，再测真机。否则所有调试都是空中楼阁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
