clamp()取最小值、首选值、最大值中的安全中间值；最小/最大值须为rem/em/px等长度单位，首选值支持单位兼容的计算表达式，推荐用语义化css变量控制并配合媒体查询兜底。
clamp() 基本写法和三个参数的实际含义
clamp() 不是魔法，它只是取一个「最小值、首选值、最大值」中的安全中间值。浏览器会先计算首选值（比如 1.5rem + 2vw），再把它和上下限比较：小于最小值就用最小值，大于最大值就用最大值，否则就用计算结果。
常见错误是把单位混用或忽略计算优先级。比如 clamp(1rem, 1.2rem + 1.5vw, 2rem) 是合法的，但 clamp(1rem, 1.2rem + 1.5vh, 2rem) 在竖屏滚动时可能意外触发上限——因为 vh 随视口高度变化，而字体通常只该响应宽度。
- 最小值和最大值必须是绝对或相对长度单位（
rem、em、px），不能是纯数字 - 首选值支持计算表达式，但所有参与运算的值需单位兼容（比如不能
1rem + 1vh） - 避免在首选值里用
em，它会继承父元素字体大小，导致嵌套时不可控
用 CSS 自定义变量控制 clamp 范围
硬编码 clamp() 的三个值会让维护变困难。用变量可以统一调控字号阶梯，比如全局改一套响应区间，不用逐个找选择器。
关键点在于：变量必须在 clamp() 内部被解析，所以得写成 clamp(var(--min), var(--pref), var(--max))，而不是把整个 clamp() 当作变量值——后者无法动态重算。
- 声明变量时注意作用域：放在
:root下可全局用，放在组件类里则只影响该块 - 变量名建议带语义，比如
--fs-h1-min、--fs-h1-pref，别用--a、--b这类缩写 - 如果需要 JS 动态更新（比如夜间模式切字号基准），直接改
document.documentElement.style.setProperty('--fs-base', '18px')即可，clamp()会自动响应
配合媒体查询做兜底与分段优化
clamp() 在现代浏览器中表现稳定，但老版本 Safari（@supports (font-size: clamp(...)) 做降级，容易漏掉部分安卓 WebView 或旧 Edge。
更稳妥的做法是：先写一个静态回退值，再用 @supports 覆盖。浏览器不支持时，直接忽略后续声明；支持时，后写的 font-size 会覆盖前面的。
h1 {
font-size: 1.5rem; /* 所有浏览器都认 */
}
@supports (font-size: clamp(1rem, 1.2rem + 2vw, 2.5rem)) {
h1 {
font-size: clamp(1rem, 1.2rem + 2vw, 2.5rem);
}
}
- 不要在
@supports里检查clamp()函数是否存在，而要检查完整声明（含括号和参数），否则某些 UA 会误判 - 移动端小屏下，
2vw可能太激进——375px 宽度时仅 7.5px，低于可读下限。可在@media (max-width: 480px)里单独设更平缓的系数 - 字体渲染质量在小尺寸下易发虚，必要时加
text-rendering: optimizeLegibility，但仅限font-size 场景
实际项目中容易被忽略的细节
最常出问题的地方不是写法，而是上下文干扰。比如父容器用了 transform: scale(0.9)，子元素的 vw 仍按原始视口算，但字体视觉大小却被压缩，造成响应错位。
-
clamp()中的vw始终基于初始视口宽度，不受zoom、transform或 iframe 缩放影响 - 使用
rem作为基准时，确保根字体大小没被 JS 动态改过又没同步更新变量（比如用html { font-size: 62.5% }后忘了适配高 DPI 设备） - 当设计系统要求「标题字号严格按 4px 步进」时，
clamp()的连续变化可能破坏对齐，此时应改用断点 +calc()分段控制
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
