最推荐用 clamp() 实现等比缩放：h1 { font-size: clamp(1.25rem, 4vw, 3rem); }，兼顾最小值、首选值和最大值，避免 vw 单独使用导致的极端尺寸问题，且需同步调整 line-height 和 letter-spacing。
font-size 用 vw 单位实现等比缩放
文字随容器宽度变化而缩放，最直接的方式是用 vw（viewport width）单位。1vw 等于视口宽度的 1%，所以 font-size: 4vw 表示文字始终占视口宽的 4%。
但要注意：它基于整个视口，不是父容器。如果容器本身只占页面一半宽，vw 缩放会过度——文字在窄屏下可能小到看不清，在大屏下又过大。
- 适合全宽标题、横幅文案等直接依赖视口的场景
- 避免用于 sidebar 或 card 内部文字，容易失控
- 必须搭配
min-font-size和max-font-size（通过@supports或 JS 检测）防止极端尺寸
clamp() 函数做安全的响应式字号
clamp() 是目前最推荐的纯 CSS 方案，能同时设定最小值、首选值和最大值，浏览器自动插值计算。
h1 {
font-size: clamp(1.25rem, 4vw, 3rem);
}上面这行表示：最小不小于 1.25rem（20px），最大不超过 3rem（48px），中间按 4vw 线性过渡。比单纯用 vw 更可控。
立即学习“前端免费学习笔记（深入）”；
- 支持所有现代浏览器（Chrome 88+、Firefox 79+、Safari 14.1+）
- 不要写成
clamp(16px, 4vw, 48px)—— 混用绝对单位和相对单位可能导致 Safari 计算异常 - 首选值建议用
vw或rem，避免用em（会继承父级缩放，链式放大风险高）
使用 resize + overflow 触发容器感知型缩放（JS 辅助）
CSS 无法原生监听父容器尺寸变化，所以当文字需严格适配某个 div 宽度（而非视口）时，得靠 JS。常见做法是利用一个隐藏的 textarea 或 resize 监听器模拟尺寸反馈。
更轻量的做法是用 ResizeObserver：
const ro = new ResizeObserver(entries => {
for (const entry of entries) {
const { inlineSize } = entry.contentBoxSize[0];
const scale = Math.min(1, inlineSize / 600); // 基准 600px
entry.target.style.fontSize = `${16 * scale}px`;
}
});
ro.observe(document.querySelector('.responsive-text'));- 注意
contentBoxSize在部分旧版 Safari 中需回退到getBoundingClientRect() - 避免高频触发重排：缩放逻辑里不要读取
offsetHeight等布局属性 - 服务端渲染（SSR）项目中，首次加载时需在
useEffect或DOMContentLoaded后再初始化 Observer
line-height 和 letter-spacing 必须同步响应
只调 font-size 不够。字号缩小时，若 line-height 仍是固定值，行距会显得拥挤；letter-spacing 过大会让小字发虚，过小则糊成一片。
-
line-height推荐用无单位数值（如1.4），它会随字号等比缩放 -
letter-spacing需配合clamp()：例如letter-spacing: clamp(-0.02em, -0.01vw, 0) - 小屏幕下慎用
text-rendering: optimizeLegibility，某些字体在字号低于 14px 时反而更模糊
真正难的不是让字变大变小，而是让「字号、行高、字间距、字重、字体族」形成一套协同缩放体系——多数失败案例都卡在只动了 font-size 这一根弦上。
