clamp() + vw 是目前最稳、最平滑的流体文字方案，因 clamp() 限定了字号上下界，避免小屏过小（如 iOS 最小 14px）和大屏过大问题，且比纯 vw 安全、比媒体查询简洁。
直接说结论：用 clamp() + vw 是目前最稳、最平滑的流体文字方案，比纯 vw 安全，比一堆 @media 省心。
为什么纯 vw 字体会在小屏上缩到看不清
因为 vw 是无约束的：视口宽度降到 320px，5vw 就只剩 16px；再窄点（比如 iPhone SE 的 320px 实际可用宽度更小），可能掉到 14px 以下——iOS 默认最小可读字号就是 14px，再小用户得眯眼凑近看。
常见错误写法：
h1 { font-size: 5vw; } /* ❌ 没下限，小屏崩 */-
vw值必须配合clamp()或媒体查询封住边界 - iOS Safari 对
100vw敏感（含滚动条宽度），推荐用90vw～95vw更稳 - 别用
vmin或vmax做字号——它们随高度变化，横屏/竖屏切换时字会跳
clamp() 三个参数怎么设才不翻车
核心逻辑是：clamp(最小值, 理想值, 最大值)，三者单位要能横向比较。混用 px/rem/em 不会报错，但容易误判实际大小。
立即学习“前端免费学习笔记（深入）”；
安全写法示例：
h1 { font-size: clamp(1.125rem, 4vw + 0.5rem, 2.5rem); }-
1.125rem≈ 18px，守住小屏可读底线 -
4vw + 0.5rem让理想值带一点基础偏移，避免窄屏下4vw单独计算过小 -
2.5rem≈ 40px，大屏不撑爆布局（4K 屏上超过 48px 就有割裂感） - 所有值统一用
rem或统一用px，别交叉——尤其别在clamp()里混em，它依赖父级font-size，不可控
CSS 变量在 clamp() 里为什么没反应
不是变量不能用，而是变量值必须是「已带单位的完整长度」。浏览器不解析 calc() 里的变量运算，也不拼接字符串。
错误示范：
:root {<br> --fs-base: 16;<br> --fs-min: calc(var(--fs-base) * 0.8); /* ❌ 运行时无效 */<br>}正确写法：
:root {<br> --fs-min: 1.125rem;<br> --fs-vw: calc(4vw + 0.5rem);<br> --fs-max: 2.5rem;<br>}<br>h1 { font-size: clamp(var(--fs-min), var(--fs-vw), var(--fs-max)); }- 变量名建议分层，如
--fs-h1-min、--fs-h2-min，方便批量维护 - 旧版 Safari（clamp()，降级写法要写两遍：
font-size: 1.5rem; font-size: clamp(...); - 别指望用 JS 动态改 CSS 变量来驱动
clamp()缩放——它只响应视口变化，不响应变量重算
小屏字还是小？先查这三处
不是 clamp() 失效，而是边界设错了。重点检查：
-
min是否 ≥1rem（16px）？低于这个值，iPhone 用户大概率要放大页面才能看清 - 是否混用了单位？例如
clamp(14px, 3vw, 1.5rem)——14px和1.5rem在系统放大字体时基准不同，行为不可预测 - 根元素
html { font-size }是否被媒体查询意外重置？比如某处写了@media (max-width: 480px) { html { font-size: 80%; } }，会导致所有rem基准下移
真正兜底的不是调 clamp() 参数，而是控制根字号本身——该加媒体查询的时候，别硬扛。
