使用 calc() 结合 cqmin 单位，将 font-size 设置为容器宽度和高度的最小值乘以缩放系数。例如 font-size: calc(min(100cqw, 100cqh) * 0.05) 可实现文字随容器缩小而缩放，且不会超出容器边界。

如何设置基础样式使文字适应不同宽高比的容器？

通过 clamp() 限制最大和最小字号，避免极端比例下文字过小或过大。核心逻辑是取容器短边作为基准，确保文字始终在可视范围内。

/* HTML结构 */
<div class="container">
  <p class="responsive-text">自适应文字</p>
</div>

/* CSS代码 */
.container {
  width: 300px;
  height: 150px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.responsive-text {
  /* 基于容器最短边的5%作为字号 */
  font-size: calc(min(100cqw, 100cqh) * 0.05);
  /* 限制最小字号为12px，最大为40px */
  font-size: clamp(12px, calc(min(100cqw, 100cqh) * 0.05), 40px);
}

当容器高度远大于宽度时，文字会怎样变化？

此时 cqw 小于 cqh，min() 会选择 cqw，文字宽度受限于容器宽度，高度方向留白增加，保持比例协调。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

/* 验证输入：窄高容器 */
.container.narrow-tall {
  width: 100px;
  height: 400px;
}
/* 输出结果：字号由100cqw决定，约为5px（若系数0.05） */

如果容器尺寸动态改变，文字缩放是否实时响应？

是的，cqmin 是容器查询单位，只要容器尺寸通过CSS或JS改变，文字大小会立即重新计算并渲染，无需JavaScript干预。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！