如何让文本随容器div缩放而非视口？解决max-width下字体过度放大问题

方法1：容器查询（最贴合需求的现代方案） #

容器查询是CSS专门针对容器尺寸而非视口的特性，完全匹配你的需求：

• 先给容器开启容器查询支持，再基于容器宽度定义字体规则
• 当容器达到max-width后，字体自动停止缩放

示例代码：

.text-container {
  max-width: 500px;
  margin: 0 auto;
  container-type: inline-size; /* 标记该容器为查询基准 */
}

.text-container p {
  /* 字体大小为容器宽度的5% */
  font-size: 5cqi; /* cqi是容器内联尺寸的1%，对应容器宽度的百分比 */
}

/* 当容器宽度达到500px时，固定字体大小（和5cqi在500px容器下的数值一致） */
@container (min-width: 500px) {
  .text-container p {
    font-size: 25px;
  }
}

方法2：clamp()+媒体查询（兼容旧浏览器） #

如果需要适配不支持容器查询的旧浏览器，可以用这个组合：

• 用clamp()让字体在最小/最大值间随视口缩放
• 当视口宽到容器触达max-width时，通过媒体查询固定字体

示例代码：

.text-container {
  max-width: 500px;
  margin: 0 auto;
}

.text-container p {
  /* 视口小于500px时，字体随视口缩放；超过时先暂时用25px上限 */
  font-size: clamp(20px, 5vw, 25px);
}

/* 视口宽度足够让容器达到500px时，强制固定字体 */
@media (min-width: 500px) {
  .text-container p {
    font-size: 25px;
  }
}

方法3：CSS变量动态计算（简洁灵活） #

用CSS变量直接计算容器的实际宽度，再基于这个变量设置字体：

• 变量始终取视口宽度和容器max-width的较小值
• 字体大小基于这个变量的百分比，自然随容器缩放而变化

示例代码：

.text-container {
  max-width: 500px;
  margin: 0 auto;
  /* 动态获取容器的实际宽度：视口宽和500px取小值 */
  --container-width: min(100vw, 500px);
}

.text-container p {
  /* 字体大小为容器宽度的5% */
  font-size: calc(var(--container-width) * 0.05);
}

内容的提问来源于stack exchange，提问作者manski