clamp() 参数顺序为最小值、首选值、最大值，单位需一致或中间值用calc混合；line-height等需同步响应；移动端safari需兜底处理；应锚定rem以兼容用户字号设置。
Clamp 函数的三个参数到底怎么配？
clamp() 不是简单设个范围，而是「最小值、首选值、最大值」的组合，顺序错一个，字体就可能卡死在最小或最大上。常见错误是把 rem 和 vw 混着写却没注意单位一致性——比如 clamp(1rem, 2.5vw, 1.5rem) 看似合理，但 2.5vw 在小屏下可能比 1rem 还小，导致实际取到的是 1rem，失去响应意义。
- 优先用同类型单位比较：推荐全用
rem或全用vw起始，再混合时确保中间值在典型视口下确实落在两端之间 - 中间值建议用
vw+ 偏移（如calc(1.2rem + 0.8vw)），比纯vw更可控 - 测试关键断点：iPhone SE（375px）、iPad（768px）、桌面（1440px），用浏览器调试器拖动宽度看字体是否连续变化
为什么字体缩放卡顿？和 line-height 有关
clamp() 自身不触发重排，但若父容器高度固定、或 line-height 写死为数值（如 line-height: 1.4），字体变大时行高不变，文字就会溢出或挤压，视觉上像“跳变”。这不是 clamp() 的锅，是排版链没对齐。
- 把
line-height也用clamp()同步控制，例如：line-height: clamp(1.2, 1.2 + 0.02vw, 1.6); - 避免给文字容器设
height或max-height，除非你明确需要截断 - 如果用了
display: flex垂直居中，检查是否加了align-items: center却没设min-height，导致容器随字体缩放塌陷
移动端 Safari 下 clamp() 字体忽大忽小怎么办？
iOS 15+ 支持 clamp()，但 Safari 对 vw 基准有特殊处理：横竖屏切换时，vw 值会延迟更新，导致字体闪回。这不是 bug，是 viewport width 计算时机问题。
- 用
min(max())替代方案兜底（兼容 iOS 14）：font-size: max(min(1.5rem, 4vw), 1rem); - 加一层
transform: scale(1)强制硬件加速，有时能缓解重绘抖动 - 禁用双击缩放（
user-scalable=no）可减少 viewport 动态调整，但仅限 WebApp 场景
Clamp 配合 rem 实现真正可访问的缩放
单纯用 vw 会让用户系统字号设置失效——这是 WCAG 不合规的。正确做法是让 clamp() 的基准锚定在 rem，而 rem 又随根元素 font-size 变化。
- 根元素设
font-size: clamp(14px, 0.75vw + 12px, 18px);，再让所有rem基于它 - 组件内字体写成
font-size: clamp(1rem, 1.2rem + 0.3vw, 1.8rem);，这样既响应视口，又尊重用户偏好 - 测试方式：在系统设置里调大字体（iOS「更大字体」/ Android「字体大小」），刷新页面看是否同步放大
实际最易忽略的，是把 clamp() 当成万能胶——它只管单个属性计算，不解决布局坍塌、行盒溢出、继承链断裂这些连锁反应。调一个 font-size 前，先扫一眼它的父、兄弟、伪元素有没有硬编码尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
