不能只靠CSS变量实现跨组件流式排版字体缩放，必须配合clamp()+rem基准+组件级变量继承结构，且所有尺寸单位须统一语义和单位制。
直接结论：不能只靠 CSS 变量本身实现“跨组件流式排版字体缩放”，必须配合 clamp() + rem 基准 + 组件级变量继承结构，且所有尺寸单位必须统一语义和单位制。
为什么clamp()里用var(--fs-base)没反应
因为 clamp() 接收的是计算后的长度值，不是表达式。浏览器不会在 clamp() 内部解析 calc() 或嵌套变量运算。
- ❌ 错误写法：
--fs-base: 16;（缺单位），--fs-sm: calc(var(--fs-base) * 0.8);→ 运行时无效 - ✅ 正确写法：
--fs-sm: 0.875rem;、--fs-vw: 2.4vw;、--fs-lg: 1.5rem;，然后直接font-size: clamp(var(--fs-sm), var(--fs-vw), var(--fs-lg)); - 关键点：每个
var()引用的变量值本身必须是「带单位的完整长度」，不能是纯数字或未求值表达式
如何让按钮、标题、正文共享同一套缩放逻辑
靠作用域继承，而不是重复定义。把基础档位变量放在 :root，各组件通过选择器局部重定义 preferred 项（如 vw 系数）或 min/max 边界。
-
:root定义统一基准：--fs-scale: 1;（用于 JS 动态调节）、--fs-unit: 1rem;（避免硬编码） - 标题组件：
h1 { font-size: clamp(1.125rem, calc(3.2vw + 0.4rem), 2.25rem); }→ 把vw项拆成calc(var(--fs-h1-vw-multiplier, 3.2) * 1vw + var(--fs-h1-vw-offset, 0.4rem))，便于批量调整 - 按钮组件：
.btn { font-size: clamp(0.875rem, calc(1.8vw + 0.2rem), 1.125rem); }→ 复用同一套rem边界，仅改中间项系数 - 所有组件的
padding、line-height必须同步用em或rem，否则缩放后比例断裂
旧版 Safari 和微信 X5 内核里怎么不崩
@supports (font-size: clamp(0, 0, 0)) 检测失败时，变量本身仍可用，但 clamp() 被忽略——此时 fallback 必须是静态 rem 值，不能是 px。
- ✅ 安全写法：
font-size: 1.125rem; font-size: clamp(var(--fs-sm), var(--fs-vw), var(--fs-lg)); - ❌ 危险写法：
font-size: 18px; font-size: clamp(...);→ 小屏下 18px 可能比var(--fs-sm)还大，导致视觉跳跃 - 不要依赖 PostCSS 插件自动加前缀——
clamp()无 WebKit 前缀，加了也无效 - 如果项目必须支持 iOS ≤14.1，建议用媒体查询兜底：
@media (max-width: 480px) { :root { --fs-sm: 1rem; --fs-lg: 1.375rem; } }
最易被忽略的一点：clamp() 的三个参数不是“最小/推荐/最大字号”，而是「最小可取值 / 浏览器应尝试的值 / 最大可取值」；当视口极小时，2.5vw 可能算出 0.3rem，远低于 min，此时浏览器取 min —— 所以 min 本身不能设得太低，至少 1rem（16px），否则小屏用户根本看不清。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
