clamp() 不能直接使用 css 变量作为 min/max 参数，因其要求三个参数均为已知长度值；变量需通过 calc() 包裹后置于 clamp() 外部，如 calc(var(--scale-base) * clamp(1rem, 4vw, 1.5rem))。
clamp() 里不能直接用 CSS 变量当 min/max？
浏览器解析 clamp() 时要求三个参数都是**已知长度值**，比如 1.25rem、4vw、24px。写成 clamp(var(--min), 4vw, var(--max)) 会直接失效——不是报错，而是整个声明被忽略，回退到继承值或默认值。
- 根本原因是：CSS 变量在运行时才计算，而
clamp()的边界判定发生在样式计算早期，变量还没“展开” - 常见错误现象：字体大小完全不响应，DevTools 中看到
font-size显示为unset或灰色禁用状态 - 验证方法：把
var(--min)替换成实际值（如1.125rem），立刻生效 → 说明问题出在变量位置
正确做法：变量放外面，用 calc() 包一层
把缩放逻辑拆开：clamp() 负责区间控制，calc() 负责比例放大/缩小。这样既保持响应性，又让变量真正起作用。
-
--scale-base: 1定义为无单位数值（不是1x或100%），JS 修改时直接设字符串'1.2'即可 - 所有字体统一写成
calc(var(--scale-base) * clamp(1rem, 4vw, 1.5rem))，clamp()内部全是硬编码值 - 若需不同组件差异化缩放（如标题放大、正文缩小），用
calc(var(--scale-base) * 0.875 * clamp(...))，乘数放calc()里，别塞进clamp() - 注意：Safari ≤14.1 需加
-webkit-clamp()前缀，可用@supports (font-size: clamp(0, 0, 0))检测后注入
为什么用 vw + rem 组合比纯 px 更可靠
clamp(16px, 2.5vw, 24px) 看似简单，但在 iPhone SE（375px）上 2.5vw = 9.375px，远低于 16px，结果永远取 16px —— 实际没响应。
- 用
rem锚定最小/最大值（如1.125rem），确保基于根字号可读；用vw做首选值，保证视口变化时平滑过渡 - 计算首选值斜率时，优先按设计稿物理尺寸反推：从 375px 宽度显示 16px → 到 1440px 显示 20px，斜率 ≈
0.565vw，偏移量 ≈0.664rem - 避免混用单位：
clamp(1rem, 2vmin, 2em)行为不可预测，因为vmin和em基准不同，浏览器无法线性比较 - 移动端必须配
<meta name="viewport" content="width=device-width, initial-scale=1">，否则100vw可能是 980px，4vw就变成 39.2px，彻底失准
媒体查询批量重置变量比 JS 更稳
想让深色模式下所有标题缩小 5%，或平板横屏时统一加大 10%？靠 JS 监听并遍历改变量太重，且 SSR 首屏会闪动。
- 直接在媒体查询里重定义
:root变量：@media (prefers-color-scheme: dark) { :root { --scale-base: 0.95; } } - 变量命名建议带语义层级，如
--fs-h1-min、--fs-p-line-height，比--size-1更易定位和批量替换 - 不要在
clamp()里写calc(var(--a) + var(--b))—— 浏览器不支持变量间运算，只支持calc()外层的单变量乘除 - 真需要容器级响应（如卡片宽度变化时字体自适应），
clamp()无解，得用container-type: inline-size+ JS 更新变量，但 90% 场景vw已足够
最易被忽略的是：用户手动双指缩放页面时，vw 仍按原始视口算，导致字体视觉变小。这不是代码问题，而是 viewport 设置是否允许缩放 —— 如果业务强制 user-scalable=no，那 clamp() 的响应式意义就只剩横竖屏切换了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
