clamp()的三个参数必须按min、preferred、max顺序填写，单位须一致；min和max设绝对或相对单位（如rem/px）确保边界，preferred必须含vw等动态单位（如calc(1.2rem + 0.5vw)）实现响应式，否则退化为静态值。
clamp() 的三个参数到底怎么填？
clamp() 接收三个值：min、preferred、max，顺序不能错。它不是“最小-最大”区间，而是“最小值、首选值、最大值”，浏览器会在这个范围内按视口尺寸线性插值计算最终值。
常见错误是把 preferred 写成固定像素（比如 clamp(14px, 16px, 20px)），这样根本不会响应式变化——它永远取 16px。真正起动态作用的是把 preferred 写成相对单位，通常是 vw 或配合 calc() 的组合。
实操建议：
- 用
clamp(14px, calc(1.2rem + 0.5vw), 20px)比纯vw更稳妥，避免小屏下字体过小或大屏下过大 -
vw基准建议从0.2vw到0.8vw试起，0.5vw 是较安全的起点 - 移动端需注意：iOS Safari 对
vw在横屏/竖屏切换时有短暂重绘延迟，别依赖它做精确布局对齐
为什么 font-size 用 clamp() 后文字还是没缩放？
最常被忽略的是：父容器宽度没撑开。比如在 div 里写 font-size: clamp(14px, 2.5vw, 20px)，但这个 div 没设 width 或被 display: inline 限制，它的宽度就不是视口宽度，vw 就失效了。
检查点：
- 目标元素是否处于「正常文档流」中？浮动、绝对定位、flex 子项默认宽度可能不等于视口
- 是否被祖先元素的
max-width或overflow: hidden截断了计算上下文？ - 用浏览器开发者工具选中元素，看 computed 样式里的
font-size是否随窗口拖拽实时变化 —— 不变就说明vw没生效
clamp() 和媒体查询比，哪个更适合移动端字体？
clamp() 不是媒体查询的替代品，而是补充。它适合「平滑过渡」场景，比如标题字号从 18px 渐进到 32px；而媒体查询更适合「断点跳跃」，比如导航栏在 480px 下隐藏二级菜单。
实际搭配更高效：
- 用
@media (max-width: 480px)控制行高、字间距等非线性属性 - 用
clamp()单独管font-size，避免为每个断点重复写字号 - 注意兼容性：IE 完全不支持，Android 4.4–6.0 的 WebView 需要加
-webkit-前缀（-webkit-clamp()不存在，只能降级为媒体查询）
字体缩放后，line-height 怎么同步适配？
line-height 不会自动跟随 font-size 缩放，尤其当它设为无单位数值（如 1.5）时，虽能按比例缩，但视觉节奏可能失衡；设为 px 或 em 又容易卡死。
推荐做法：
- 始终用无单位数值（
line-height: 1.4），这是最安全的继承方式 - 如果必须精确控制，用
clamp()单独写line-height，但参数范围要窄（比如clamp(1.3, 1.35, 1.4)），避免行距抖动 - 警惕
rem配合根字体缩放的方案：一旦用了html { font-size: clamp(...) }，所有rem都会联动，容易引发意外缩放链
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
