应使用带语义的css变量配合clamp()，如--fs-h1-min、--fs-h1-vw、--fs-h1-max，全部定义在:root且带单位；三参数单位需一致（推荐全rem），媒体查询中仅通过:root重设变量，避免混用单位及em。
直接用 clamp() 写死值会卡在维护死角
很多人一上来就写 font-size: clamp(1rem, 2.5vw, 1.5rem)，上线后发现：设计改了所有标题要统一放大 10%，就得全局搜索替换；深色模式下想微调字号，又得再加一层媒体查询；第三方组件里硬编码的 1.25rem 完全不响应。根本问题在于把数值耦合进样式层，而不是抽成可配置项。
真正能长期维护的写法是让 clamp() 的三个参数全部来自变量，且变量名带语义，比如 --fs-h1-min、--fs-h1-vw、--fs-h1-max。这样改一处，所有引用它的标题自动更新。
:root 中定义变量必须带单位，否则 var() 引用静默失败
常见错误是写 --fs-base: 16（缺单位），然后在 font-size: var(--fs-base) 里用——浏览器不报错，但计算结果为 0px，文字直接消失。CSS 变量不是 JS 变量，它不会自动补单位。
正确做法是：
-
--fs-h1-min: 1.25rem✔️（完整长度值） -
--fs-h1-vw: 4vw✔️（视口单位本身合法） -
--fs-h1-max: 2.5rem✔️ - 避免
calc(var(--a) * 1px)这类兜底操作——那是给纯数字变量用的，而这里变量本身已含单位
媒体查询中重设变量，必须作用于 :root，且不能依赖“继承”
断点之间不继承。比如你在 @media (min-width: 768px) 里写了 :root { --fs-h1-min: 1.5rem; }，但没写桌面端的 --fs-h1-max，那它不会沿用上一个断点的值，而是回退到初始定义（或 unset）。
实操要点：
- 所有变量必须定义在
:root，哪怕只是初始值 - 媒体查询内只能通过
:root { --fs-h1-min: 1.75rem; }修改，不能写在.card或h1里 - 别用
!important覆盖变量值，否则后续媒体查询无法再覆盖 - 初始值建议设移动端默认：
:root { --fs-h1-min: 1.125rem; --fs-h1-max: 2rem; }
clamp() 配合变量时，混用单位会导致区间失效
写 clamp(14px, 4vw, 1.25rem) 看似灵活，实则危险：14px 和 1.25rem 在不同根字体下换算结果不同，小屏下可能因换算抖动导致首选值永远不生效；iOS Safari 对含 vh 的 clamp() 支持不稳定，优先用 vw。
安全组合只有一种：三参数单位类型一致，且至少一项是 rem（确保响应根字体缩放）：
-
clamp(0.875rem, calc(0.24rem + 0.375vw), 1.375rem)✔️（全部基于 rem 基准） -
clamp(16px, 3.8vw, 22px)✔️（全部为绝对/视口单位，但不响应 JS 动态缩放） - 避免
clamp(1rem, 4vw, 2em)❌（em依赖父级，行为不可控）
最易被忽略的是：clamp() 不感知用户系统字体设置或强制缩放，这部分必须靠 JS 补充监听和修正，纯 CSS 无解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
