clamp()三参数须按min、preferred、max顺序配置，preferred应为calc()混合单位表达式以实现线性响应；safari≤15.4对含calc()的clamp()支持不全；容器内响应需结合cqw或em缩放；移动端需加viewport禁用缩放防字体跳变。
clamp() 的三个参数到底怎么配？
clamp() 接收三个值：min、preferred、max，顺序不能错。很多人直接套 clamp(16px, 2vw, 24px)，结果小屏字太小、大屏又卡在 24px 不再增长——问题出在 preferred 选了纯视口单位，没考虑基准和缩放斜率。
实际更稳的写法是用 calc() 混合单位构造线性响应段：
font-size: clamp(14px, calc(14px + 0.5vw), 20px);这样从 14px 起步，每增加 100vw 宽度就涨 0.5px，到约 1200px 时自然触达
20px 上限。关键点：中间项必须是可计算的表达式，且斜率要合理（0.25vw ~ 0.75vw 较常见）。
为什么 font-size: clamp(...) 在 Safari 里不生效？
老版本 Safari（≤15.4）对 clamp() 中含 calc() 的支持不完整，尤其当 calc() 出现在中间参数时容易静默失败。验证方式很简单：打开开发者工具，在元素样式面板里看 font-size 是否被划掉或显示为 invalid value。
解决办法只有两个：
- 降级为两段式媒体查询（兼容性最稳）
- 升级 Safari 并确保 CSS 未被其他规则覆盖（比如父级设了
font-size: 0.875rem，会干扰根字号继承）
如何让 clamp() 响应的是容器宽度而非视口？
clamp() 本身只响应计算上下文，无法直接监听容器。想实现“卡片内标题随卡片变宽而缩放”，得配合 CSS 自定义属性 + resize 监听或 JS 计算：
- 纯 CSS 方案：用
container-type: inline-size+@container查询（Chrome 113+、Safari 16.4+ 支持），但目前还不能把容器宽度喂给clamp()的参数 - 实用折中：给容器设
font-size: clamp(...)，内部文本用em，间接实现相对缩放
例如：
.card {
font-size: clamp(12px, 0.5cqw, 16px);
}
.card h3 {
font-size: 1.2em; /* 随 card 的 font-size 缩放 */
}
这里 cqw（container query width）是关键，但注意它依赖容器启用了容器查询。
移动端字体忽大忽小，是不是 clamp() 在作怪？
不是 clamp() 本身的问题，而是它放大了 viewport 缩放行为的影响。iOS Safari 默认开启双击缩放，页面缩放后，1vw 实际像素数会变，导致 clamp() 计算结果跳变。
必须加这条 meta：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">否则哪怕
clamp() 写得再准，用户双击一下，字体就失真。这点常被忽略，因为开发时很少手动缩放测试。
真正难调的其实是小屏下最小值的可读性——14px 在 iPhone SE 上可能刚够，但搭配深色背景或细字体时仍吃力。得实机测，不能只信设计稿标注。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
