clamp()字号应填为clamp(最小值, 动态长度表达式, 最大值)，第二项必须是含vw/rem等单位的线性表达式如1.25rem+0.5vw，不可用calc()或无单位数字，首项建议rem保小屏可读，末项用rem/px防超大屏溢出。
clamp() 的三个参数到底怎么填才不翻车
直接说结论：字号用 clamp(最小值, 动态值, 最大值)，但多数人填错第二项——它必须是带单位的线性表达式，比如 1.25rem + 0.5vw，不能写成 calc(1.25rem + 0.5vw) 或纯数字。浏览器会拒绝解析非合法长度值。
- 第一项（
min）建议用rem，保证小屏下可读性底线，比如1rem（16px） - 第二项（
preferred）必须含至少一个响应单位（vw、vh、rem混用也可），且整体能被解析为长度，例如1.125rem + 0.3vw是合法的，1.125 + 0.3vw会失效 - 第三项（
max）建议用rem或px，避免在超大屏上无限放大，比如2.25rem（36px）
为什么用 clamp() 而不是 media query + rem
本质区别在于插值方式：clamp() 是连续平滑变化，@media 是阶梯式跳变。比如从 375px 到 414px，clamp(1rem, 1.125rem + 0.3vw, 1.5rem) 每 1px 宽度都微调字号；而媒体查询在两个断点之间完全静止。
- 适合标题、卡片主文案等对视觉节奏敏感的内容，用户拖动窗口时不会感到“卡顿”或“突兀”
- 维护成本更低：不用反复算断点、写多组
font-size，一套表达式覆盖全范围 - 注意兼容性：Safari 13.1+、Chrome 88+、Firefox 79+ 支持，IE 全系不支持，需加降级（见下一条）
必须加的 fallback 写法（否则 iOS 13 以下白屏）
旧版 Safari 不识别 clamp()，会直接丢弃整条声明。必须用层叠顺序让老浏览器读到基础值，新浏览器再覆盖：
h1 {
font-size: 1.5rem; /* fallback for old Safari / IE */
font-size: clamp(1rem, 1.125rem + 0.3vw, 2.25rem);
}- 顺序不能颠倒：后写的声明会覆盖前一条，所以
clamp()必须放在后面 - 不要用
@supports (font-size: clamp(...))包裹——iOS 13.0 的 Safari 识别@supports但不识别clamp()，导致 fallback 被跳过 - 如果项目需支持微信内置浏览器（X5 内核早期版本），也建议加 fallback，因其 CSS 解析行为不稳定
vw 单位在移动端的真实表现与陷阱
vw 基于视口宽度，但移动端 Safari 的「视口」包含地址栏高度，滚动时视口高度会变，而宽度一般稳定——所以用 vw 做字号是安全的，但别用 vh 做行高或容器高，容易抖动。
立即学习“前端免费学习笔记（深入）”；
- iPhone X 及之后机型，竖屏下
100vw≈ 375px（逻辑像素），和设备物理像素无关 - 安卓部分浏览器（如三星 Internet）在横屏切换瞬间可能短暂触发错误
vw值，但字号重排快，用户几乎无感 - 慎用过大系数：比如
1rem + 2vw在 1920px 屏幕上会达到约1rem + 38.4px，远超可读上限，需配合max严格约束
真正难的是平衡「小屏够大」「大屏不撑爆」「缩放时仍可用」——这些得靠真实设备反复拖动调试，而不是只看设计稿数值。
