你可能正在寻找这样的东西：

http://jsfiddle.net/sijav/dGsC9/4/ http://fiddle.jshell.net/sijav/dGsC9/4/show/

我使用过flowtype，它工作得很好（不过它是JavaScript而不是纯CSS解决方案）：

$('body').flowtype({
    minFont: 10,
    maxFont: 40,
    minimum: 500,
    maximum: 1200,
    fontRatio: 70
});

功能如下：

document.body.setScaledFont = function(f) {
  var s = this.offsetWidth, fs = s * f;
  this.style.fontSize = fs + '%';
  return this
};

然后将所有文档子元素的字体大小转换为em或%。

然后向代码中添加类似的内容以设置基本字体大小。

document.body.setScaledFont(0.35);
window.onresize = function() {
    document.body.setScaledFont(0.35);
}

http://jsfiddle.net/0tpvccjt/

为了使字体大小适合其容器，而不是窗口，请参阅我在这个问题中分享的resizeFont（）函数（其他答案的组合，其中大多数已经链接到这里）。它使用window.addEventListener（'size'，resizeFont）；触发；。

Vanilla JavaScript：调整字体大小以适应容器

JavaScript：

function resizeFont() {
  var elements  = document.getElementsByClassName('resize');
  console.log(elements);
  if (elements.length < 0) {
    return;
  }
  _len = elements.length;
  for (_i = 0; _i < _len; _i++) {
    var el = elements[_i];
    el.style.fontSize = "100%";
    for (var size = 100; el.scrollHeight > el.clientHeight; size -= 10) {
      el.style.fontSize = size + '%';
    }
  }
}

您可能可以使用vw/vh作为备用，因此您可以使用JavaScript动态分配em或rem单位，确保在禁用JavaScript时字体可以缩放到窗口。

将.resize类应用于包含要缩放的文本的所有元素。

在添加窗口调整大小事件侦听器之前触发函数。然后，当加载页面以及调整页面大小时，任何不适合其容器的文本都将被缩小。

注意：默认字体大小必须设置为em、rem或%，以获得正确的结果。

带有calc（）、CSS单位和数学的纯CSS解决方案

这并不是OP所要求的，但可能会让某人过得很愉快。这个答案并不容易，需要在开发者端进行一些研究。

我终于得到了一个纯CSS解决方案，它使用了不同单位的calc（）。您需要对公式有一些基本的数学理解，才能计算出calc（）的表达式。

当我完成这项工作时，我必须得到一个全页面宽度的响应标头，在DOM中填充一些父级。我将在这里使用我的值，用你自己的值替换它们。

数学

您需要：

在某些视口中，比例调整得很好。我使用了320个像素，因此我得到了24个像素高和224个像素宽，因此比率为9.333…或28/3容器宽度，我有填充物：3em和全宽，因此达到100wv-2*3em

X是容器的宽度，因此请用自己的表达式替换它，或调整值以获得整页文本。R是你的比率。您可以通过调整某些视口中的值、检查元素宽度和高度并将其替换为自己的值来获得它。此外，它是宽度/高度；）

x = 100vw - 2 * 3em = 100vw - 6em
r = 224px/24px = 9.333... = 28 / 3

y = x / r
  = (100vw - 6em) / (28 / 3)
  = (100vw - 6em) * 3 / 28
  = (300vw - 18em) / 28
  = (75vw - 4.5rem) / 7

砰！成功了！我写了

font-size: calc((75vw - 4.5rem) / 7)

到我的标题，它在每个视口中都调整得很好。

但它是如何工作的？

我们需要一些常量。100vw表示视口的全宽，我的目标是建立带有一些填充的全宽标头。

比率。在一个视口中获得一个宽度和高度，我就得到了一个可以使用的比例，而通过这个比例，我知道在其他视口宽度中的高度应该是多少。用手计算它们需要大量的时间，至少需要大量的带宽，所以这不是一个好答案。

结论

我想知道为什么没有人知道这一点，有些人甚至告诉我，这是不可能修补CSS的。我不喜欢在调整元素时使用JavaScript，所以我不接受JavaScript（并忘记jQuery）的答案而不进行更多挖掘。总而言之，这很好，这是在网站设计中实现纯CSS的一步。

我很抱歉，我的文本中有任何不寻常的惯例，我不是英语母语，而且我对编写Stack Overflow答案也很陌生。

还应该注意的是，我们在一些浏览器中有邪恶的滚动条。例如，当使用Firefox时，我注意到100vw表示视口的全宽，在滚动条下延伸（内容无法扩展。

这是一个纯CSS解决方案，您承认断点是必要的，但也希望文本缩放：

我知道我可以添加断点，但我真的希望文本能够缩放还有额外的断点，否则。。。。

以下是一种方法：

自定义财产媒体查询断点clamp（）（2022年2月的浏览器支持率为93%）计算（）

如果可以使用一个通用的缩放因子来控制每个屏幕最大宽度容器内的所有文本缩放，则只需按最大宽度缩放自定义属性，并将此因子应用于1计算。

基本设置如下所示：

:root {
  --scaling-factor: 1
}

.parent {
  font-size: 30px
}

.largest {
  font-size: clamp(60%, calc(var(--scaling-factor) * 100%), 100%); 
}

.middle {
  font-size: clamp(60%, calc(var(--scaling-factor) * 85%), 100%); 
}

.smallest {
  font-size: clamp(60%, calc(var(--scaling-factor) * 70%), 100%); 
}

然后嵌套您的媒体查询，如下所示（或断点所需的任何内容）：

@media (max-width: 1200px) {
  :root {
    --scaling-factor: 0.9
  }
  @media (max-width: 800px) {
    :root {
      --scaling-factor: 0.8
    }
    @media (max-width: 600px) {
      :root {
        --scaling-factor: 0.5 /* nope, because the font-size is floored at 60% thanks to clamp() */
      }
    }
  }
}

这将最小化媒体查询标记。

优势

一个自定义属性控制所有缩放。。。无需为每个媒体断点添加多个声明使用clamp（）设置了字体大小的下限，这样可以确保文本永远不会太小（这里的下限是父字体大小的60%）

请查看此JSFiddle演示。调整窗口大小，直到宽度最小，段落的字体大小都相同。

我看不到任何关于CSS flex属性的答案，但它也非常有用。