结论：用 --base-font-size + em 单位 + clamp() 控制范围，是目前最可控、最易维护的自适应流式排版方案。它不依赖 js，不靠媒体查询硬切点，也不强求所有字体行为一致。
直接说结论：用 --base-font-size + em 单位 + clamp() 控制范围，是目前最可控、最易维护的自适应流式排版方案。它不依赖 JS，不靠媒体查询硬切点，也不强求所有字体行为一致。
为什么不能只靠 rem 或 vw
很多人一上来就写 font-size: clamp(1rem, 4vw, 1.5rem)，结果发现标题在小屏上缩得太小、大屏又撑爆容器——问题出在 vw 是纯视口比例，没考虑内容密度和阅读舒适区。而只用 rem 又等于把缩放权全交给根节点，一旦设计稿里中英文混排、字号层级多，1rem 在不同模块里实际表现差异极大。
真正要解决的不是“怎么变”，而是“按什么逻辑变”。核心逻辑是：字号应随容器宽度线性变化，但必须被上下限兜底，且字距、行高、边距等衍生值要同步响应。
--font-scale 作为主控变量比直接改 font-size 更灵活
把缩放系数抽成 CSS 自定义属性，而不是直接操作 font-size，好处在于：其他依赖字号的属性（如 letter-spacing、line-height、margin）可以统一乘这个系数，避免重复计算。
-
:root { --font-scale: 1; }—— 默认值设为 1，便于后续调试 - 在容器上动态设置：
.article { --font-scale: clamp(0.8, 1vw, 1.2); } - 所有子元素用：
font-size: calc(var(--base-font-size, 16px) * var(--font-scale)); - 字距同步响应：
letter-spacing: calc(0.02em * var(--font-scale));
容器宽度驱动缩放，而不是视口宽度
用 1vw 看似简单，但会导致同一段文字在侧边栏和主内容区缩放不一致。更合理的是绑定到父容器宽度，比如：
.content { --font-scale: clamp(0.75, 100% / 640, 1.25); }
这里 640 是设计基准宽度（单位 px），100% / 640 表示“当前容器宽度占基准宽度的比例”。当容器宽 320px 时，系数为 0.5；宽 1280px 时为 2 —— 再用 clamp() 限制在 0.75–1.25 区间，就能兼顾可读性与弹性。
注意：100% 指的是父容器的 width，所以该容器必须有明确宽度（非 fit-content 或未设宽的 flex item），否则计算会失效。
容易忽略的兼容性与回退机制
clamp() 在 Safari 13.1+ 和 Chrome 88+ 支持良好，但旧版 iOS Safari 会直接忽略整条声明。稳妥做法是双声明：
font-size: 1.125rem;<br>font-size: clamp(1rem, 4vw, 1.5rem);
更关键的是：不要把所有尺寸都塞进 clamp()。像 border-width、box-shadow 这类视觉修饰项，保持固定像素值反而更稳定；而 padding、margin 建议用 em，让它随字号自然缩放。
最后提醒一点：自定义属性本身不触发重排，但频繁修改它（比如监听 resize 并 setProperty）可能引发性能抖动。真需要动态响应容器尺寸变化，优先用 @container 查询，而不是 JS 手动更新 CSS 变量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
