CSS 提供了几种方法来实现根据容器的大小缩放字体大小。下面是几种主要的方法：

1. 使用视口单位（Viewport Units）

利用视口单位，如 vw, vh, vmin, vmax，可以实现字体大小的响应式缩放。例如，vw 表示视口宽度的百分比，vh 表示视口高度的百分比。

css
.container {
  font-size: 2vw; /* 字体大小为视口宽度的2% */
}

这种方法的缺点是字体大小直接与视口的大小挂钩，而不是容器的大小。

2. 使用媒体查询（Media Queries）

通过媒体查询，可以在不同的屏幕尺寸下应用不同的样式规则。这样可以为不同的容器宽度设置不同的字体大小。

css
.container {
  font-size: 16px; /* 默认字体大小 */
}

@media (max-width: 600px) {
  .container {
    font-size: 14px; /* 在视口宽度小于600px时变小 */
  }
}

@media (min-width: 601px) and (max-width: 1200px) {
  .container {
    font-size: 18px; /* 在视口宽度介于601到1200px时变大 */
  }
}

3. 使用CSS计算函数 calc()

calc() 函数允许您执行计算来确定CSS属性的值。可以将固定大小与视口单位相结合，为字体大小提供更多控制。

css
.container {
  font-size: calc(12px + 1vw);
}

4. 使用rem单位和html的font-size

如果容器的大小基于rem单位，可以通过改变html标签的font-size来间接改变容器内字体的大小。

css
html {
  font-size: 16px;
}

@media (max-width: 600px) {
  html {
    font-size: 14px;
  }
}

.container {
  font-size: 1.5rem; /* 1.5倍于html的字体大小 */
}

5. 使用JavaScript

在某些情况下，可能需要更精细的控制，可以使用JavaScript来监听窗口大小的变化，并根据容器的大小动态调整字体大小。

javascript
function adjustFontSize() {
  var container = document.querySelector('.container');
  var containerWidth = container.offsetWidth;
  var fontSize = containerWidth / 100; // 假设容器宽度的百分之一为基本字体大小
  container.style.fontSize = fontSize + 'px';
}

window.addEventListener('resize', adjustFontSize);
adjustFontSize();

使用JavaScript的方法提供了最灵活的解决方案，但它需要额外的性能开销，并且可能会在没有JavaScript的环境下失效。

通过上述方法，你可以根据容器的大小来缩放字体大小，从而实现响应式设计。每种方法都有其适用场景和限制，可以根据实际需要选择最合适的方法。

容器查询现在可能是最好的选择，具体取决于您的用例，并且所有主要浏览器都支持。请参阅此处的支持级别：https://caniuse.com/mdn-css_properties_container

现在很容易控制：

shell
.module h2 {
  font-size: 1em;
  container-name: sidebar
}

@container sidebar (min-width: 700px) {
  .module h2 {
    font-size: 2em;
  }
}

运行代码片段Hide results

展开片段

请查看有关容器查询的 MDN 文章了解更多详细信息：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

您可以完成的更多示例：https://css-tricks.com/a-few-times-container-size-queries-would-have-helped-me-out/

---

旧答案

如果容器不是正文，CSS 技巧涵盖了_使文本适合容器_中的所有选项。

如果容器是主体，那么您要寻找的是Viewport-percentage lengths：

视口百分比长度与初始包含块的大小相关。当初始包含块的高度或宽度更改时，它们会相应地缩放。然而，当根元素上的溢出值为 时auto，任何滚动条都被假定不存在。

这些值为：

• vw（视口宽度的%）
• vh（视口高度的%）
• vi（根元素内联轴方向视口大小的 1%）
• vb（根元素块轴方向视口大小的 1%）
• vmin``vw（或中较小的一个vh）
• vmax（较大的 或vw或vh）

1 v* 等于初始包含块的 1%。

使用它看起来像这样：

shell
p {
    font-size: 4vw;
}

正如您所看到的，当视口宽度增加时， 也随之增加font-size，而无需使用媒体查询。

这些值是一个大小调整单位，就像px或一样em，因此它们也可用于调整其他元素的大小，例如宽度、边距或填充。

浏览器支持非常好，但您可能需要备用，例如：

shell
p {
    font-size: 16px;
    font-size: 4vw;
}

查看支持统计数据： https: //caniuse.com/viewport-units。

另外，请查看 CSS 技巧以获得更广泛的外观：Viewport Sized Typography

这是一篇关于设置最小/最大尺寸以及对尺寸进行更多控制的好文章：精确控制响应式排版

这是设置大小以calc()使文本填充视口的示例： https: //codepen.io/CrocoDillon/pen/wvdrBY

另外，请查看这篇文章，它也使用了一种被称为“moltenleading”的技术来调整行高：CSS 中的 Moltenleading

但是如果容器不是视口（主体）怎么办？

Alex在2507rkt3 的回答下的评论中提出了这个问题。

这一事实并不意味着vw不能在某种程度上用于确定该容器的大小。现在要看到任何变化，我们必须假设容器在某种程度上是尺寸灵活的。无论是通过直接百分比width还是通过 100% 减去利润。如果容器总是设置为200px宽，那么这一点就变得“没有意义”——然后只需设置一个font-size适合该宽度的值。

实施例1

然而，对于宽度灵活的容器，必须认识到，在某种程度上，容器的_大小仍然与视口无关_。因此，需要vw根据与视口的百分比大小差异来调整设置，这意味着要考虑父包装器的大小。举个例子：

shell
div {
    width: 50%;
    border: 1px solid black;
    margin: 20px;
    font-size: 16px;
    /* 100 = viewport width, as 1vw = 1/100th of that
       So if the container is 50% of viewport (as here)
       then factor that into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
    */
    font-size: 2.5vw;
}

假设这里div是 的子级body，它50%的100%宽度就是这个基本情况下的视口大小。基本上，您想要设置一个vw对您来说看起来不错的。正如您在上面的 CSS 内容中我的评论中所看到的，您可以通过数学方式“思考”整个视口大小，但您不需_要这样做_。文本将随容器“弯曲”，因为容器会随着视口大小的调整而弯曲。这是两个不同大小的容器的示例。

实施例2

您可以通过强制基于此进行计算来帮助确保视口大小。考虑这个例子：

shell
html {width: 100%;} /* Force 'html' to be viewport width */
body {width: 150%; } /* Overflow the body */

div {
    width: 50%;
    border: 1px solid black;
    margin: 20px;
    font-size: 16px;
    /* 100 = viewport width, as 1vw = 1/100th of that
       Here, the body is 150% of viewport, but the container is 50%
       of viewport, so both parents factor  into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 3.75vw
       (5 * 1.5 [i.e. 150%]) * .5 [i.e. 50%]
    */
    font-size: 3.75vw;
}

大小仍然基于视口，但本质上是基于容器大小本身设置的。

如果容器的大小动态变化......

如果容器元素的大小最终通过@media断点或 JavaScript 动态改变其百分比关系，那么无论基本“目标”是什么，都需要重新计算以维持文本大小调整的相同“关系”。

以上面#1 为例。如果通过或 JavaScriptdiv将 切换为宽度，则同时需要在媒体查询或通过 JavaScript 中调整 来适应新的计算。这将使文本大小与原始容器的“宽度”从视口大小减少一半时的大小相同，但现在由于其自身百分比计算的变化而减少了。25%``@media``font-size``5vw * .25 = 1.25``50%

一个挑战

使用CSScalc()功能时，动态调整会变得困难，因为该功能font-size此时不起作用。因此，如果宽度在 上发生变化，则无法进行纯 CSS 调整calc()。当然，边距宽度的微小调整可能不足以保证 的任何更改font-size，因此可能并不重要。

SVG 解决方案：

shell
.resizeme {
  resize: both;
  margin: 0;
  padding: 0;
  height: 75px;
  width: 500px;
  background-color: lightblue;
  overflow: hidden;
}

<div class="resizeme">
  <svg
    width="100%"
    height="100%"
    viewBox="0 0 500 75"
    preserveAspectRatio="xMinYMid meet"
    style="background-color:green"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
  >
        <text
          x="0"
          y="75"
          font-size="75"
          fill="black"
        >█Resize This█</text>
      </svg>
</div>

运行代码片段Hide results

展开片段

使用 SVG 和文本换行的解决方案foreignObject：

shell
.resizeme {
  resize: both;
  margin: 0;
  padding: 0;
  height: 200px;
  width: 500px;
  background-color: lightblue;
  overflow: hidden;
}

<div class="resizeme">
  <svg
    width="100%"
    height="100%"
    viewBox="0 0 500 200"
    preserveAspectRatio="xMinYMin meet"
  >
      <foreignObject width="100%" height="100%" xmlns="http://www.w3.org/1999/xhtml">
        <div xmlns="http://www.w3.org/1999/xhtml" style="background-color:lightgreen;">
          <h1>heading</h1>
          <p>Resize the blue box.</p>
        </div>
      </foreignObject>
    </svg>
</div>

运行代码片段Hide results

展开片段

CSS 容器查询

2022 年末添加的 CSS 功能集使使用容器缩放字体大小变得简单。

容器查询带有一组新的 CSS 单元**/cqw（cqh容器查询宽度/** h八）。要使用它们，您需要在要使用其大小的父元素上设置属性（不必是直接父元素）。最小的例子：container-type

shell
<div>
  <p>Lorem ipsum dolor sit amet</p>
</div>

<style>
  div {
    container-type: inline-size;
  }
  p {
    font-size: 5cqw;
  }
</style>

运行代码片段Hide results

展开片段

字体大小会随着容器的增大而平滑增大。当容器宽度为 1000px 时，p字体大小将为1000px / 100 * 5 = 50px.

container-type可以是size或inline-size。size跟踪容器的高度和宽度，这允许您同时使用cqw和cqh。在网络上的大多数情况下，高度是根据内容计算的，您只需指定宽度。为了节省浏览器的一些工作，您通常需要进行设置container-type: inline-size;，以便浏览器仅跟踪内联尺寸，通常是宽度（除非您设置writing-mode为垂直）。

浏览器对容器查询的支持正在迅速增长：

• 2023年1月1日：75%
• 2023-04-03: 83%
• 2023年11月24日：90%

在我的一个项目中，我使用 vw 和 vh 之间的“混合”来根据我的需要调整字体大小，例如：

shell
font-size: calc(3vw + 3vh);

我知道这并不能回答OP的问题，但也许它可以成为其他人的解决方案。