clamp() 在 ios 上常失效是因旧版 safari 不解析该函数却识别 @supports，导致无 fallback 时回退默认字号；必须前置 rem fallback 并避免用 @supports 包裹，且 preferred 值须为合法线性长度表达式如 1.125rem + 0.3vw。
clamp() 能实现移动端流体排版，但直接写 font-size: clamp(1rem, 4vw, 2rem) 很可能在 iPhone 上失效或显示过小——问题不在函数本身，而在单位选择、fallback 顺序和视口计算逻辑。
为什么 clamp() 在 iOS 上经常“没反应”
旧版 Safari（iOS 13.0 及更早）识别 @supports 但不解析 clamp()，导致整条 font-size 声明被丢弃；若未提供 fallback，文字会回退到浏览器默认字号（通常 16px），视觉上像“没生效”。
- 必须把基础值写在前面：
font-size: 1.5rem;→ 浏览器兜底 - 再写覆盖声明：
font-size: clamp(1rem, 1.125rem + 0.3vw, 2.25rem);→ 新浏览器覆盖 - 绝不能用
@supports (font-size: clamp(...))包裹，否则 iOS 13.0 会跳过 fallback - 微信 X5 内核部分版本也有类似解析缺陷，建议统一加 fallback
clamp() 的三个参数到底怎么填才不翻车
直接说结论：字号用 clamp(min, preferred, max)，但多数人填错第二项——它必须是带单位的线性表达式，比如 1.125rem + 0.3vw，不能写成 calc(1.125rem + 0.3vw) 或纯数字 1.125 + 0.3vw。
- 第一项（
min）建议用rem，如1rem（≈16px），保小屏可读底线 - 第二项（
preferred）必须含至少一个响应单位（vw、rem等），且整体能被解析为长度，例如1.125rem + 0.3vw合法，1.125 + 0.3vw失效 - 第三项（
max）建议用rem或px，如2.25rem（≈36px），防超大屏溢出 - 别混用单位：比如
min: 16px+max: 2rem，DPI 不同会导致夹逼边界偏移
移动端 vw 真实表现与陷阱
vw 基于视口宽度，在移动端 Safari 中基本稳定（iPhone X+ 竖屏下 100vw ≈ 375px），但有两个关键限制：
- 别用
vh做行高或容器高——Safari 滚动时地址栏收起/展开会改变视口高度，造成抖动 -
clamp()始终按整个 viewport 计算，不是你内容区的宽度；如果父容器加了max-w-3xl，字体仍按屏幕宽缩放，可能视觉脱节 - 安卓部分浏览器（如三星 Internet）横屏时
vw计算异常，建议在横屏关键路径做简单媒体查询兜底
Tailwind 用户注意：流体字号配置位置很关键
在 tailwind.config.js 里加流体字号，最常见错误是把配置写在 theme.fontFamily 顶层，而不是 theme.extend.fontFamily 下：
- ❌ 错误：
fontFamily: { fluid: ['clamp(1rem, 4vw + 0.8rem, 2rem)'] }→ Tailwind 完全忽略 - ✅ 正确：
extend: { fontFamily: { fluid: ['clamp(1rem, 4vw + 0.8rem, 2rem)'] } } - 必须确保
content配置包含使用该类的文件路径，否则 JIT 模式不生成 CSS - 若需行高适配，得显式传数组：
['clamp(...)', { lineHeight: '1.4' }]；Tailwind 不支持对line-height做流体计算
真正麻烦的从来不是写对 clamp() 公式，而是 SSR 渲染时服务端无法读取 viewport 导致首屏字体错位、dir="rtl" 切换时字体别名未同步、以及中文字体栈 fallback 是否匹配——这些都得靠 HTML 层或自定义属性提前注入，而非仅靠 CSS 规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
