HTML5如何让文字自适应容器_响应式文字排版技巧总结【方法】_技术教程

最推荐用 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'));