为了使字体大小适合其容器，而不是窗口，请参阅我在这个问题中分享的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或%，以获得正确的结果。

如果容器不是主体，CSS技巧将覆盖“将文本适配到容器”中的所有选项。

如果容器是主体，则要查找的是视口百分比长度：

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

值为：

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

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

使用它看起来像这样：

p {
    font-size: 4vw;
}

如您所见，当视口宽度增加时，字体大小也会增加，而无需使用媒体查询。

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

浏览器支持非常好，但您可能需要一个后备方案，例如：

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

查看支持统计信息：http://caniuse.com/#feat=viewport-单位。

此外，请查看CSS技巧以获得更广泛的外观：视口大小的版式

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

下面是一篇关于使用calc（）设置大小以使文本填充视口的文章：http://codepen.io/CrocoDillon/pen/fBJxu

此外，请查看这篇文章，它使用了一种称为“熔化引线”的技术来调整线条高度。CSS中的熔融铅

功能如下：

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/

此web组件更改字体大小，使内部文本宽度与容器宽度匹配。查看演示。

您可以这样使用：

<full-width-text>Lorem Ipsum</full-width-text>

但如果容器不是视口（主体）呢？

亚历克斯在2507rkt3的回答下的评论中提出了这个问题。

这一事实并不意味着大众汽车在一定程度上不能用于该集装箱的尺寸。现在要看到任何变化，我们必须假设容器在某种程度上是灵活的。无论是通过直接百分比宽度还是通过100%减去边距。如果容器始终设置为200px宽，那么这一点就变得“无意义”了——然后只需设置一个适用于该宽度的字体大小。

示例1

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

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是主体的子对象，它是100%宽度的50%，在这个基本情况下是视口大小。基本上，你想设定一个对你来说很好的大众汽车。正如我在上面的CSS内容中的评论中所看到的，你可以从数学上考虑整个视口的大小，但你不需要这样做。文本将随着容器“伸缩”，因为容器会随着视口大小的调整而伸缩。下面是两个不同大小的容器的示例。

示例2

通过强制基于此进行计算，可以帮助确保视口大小。考虑以下示例：

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为例。如果div被@media或JavaScript切换为25%宽度，那么同时，字体大小需要在媒体查询或JavaScript中调整为5vw*.25=1.25的新计算值。这将使文本大小与原始50%容器的“宽度”从视口大小减小一半时的大小相同，但现在由于其自身百分比计算的变化而减小。

挑战

使用CSS calc（）函数时，很难动态调整，因为该函数此时不适用于字体大小。因此，如果宽度在calc（）上发生变化，则不能进行纯CSS调整。当然，对页边空白宽度的轻微调整可能不足以保证字体大小的任何改变，因此这可能无关紧要。

纯CSS在某种程度上是可能的。

.自动调整文本大小{content:url（“data:image/svg+xml；utf8，<svg xmlns='http://www.w3.org/2000/svg'version='1.1'height='1.3em'width='10em'><text x='0'y='0.9em'fill='red'>这里是调整大小的文本</text></svg>“）；背景色：rgba（0,0,0,0.06）；动画：成长2s无限交替两者；}@关键帧增长{来自｛width:100px；｝到｛width:300px；｝}<div class=“自动调整文本大小”></div>

解释

内容规则设置元素的内容，它可以是图像的URL，包括SVG图像。SVG图像可以包含文本，因此基本上您有一个带有文本的背景图像，该图像根据其父图像的大小调整大小。您也可以使用background image属性，但与内容不同，它不会影响元素的布局，因此您需要定义父元素的大小。

这种方法的问题是，您需要定义SVG中文本的颜色、大小和位置。他们不会从父母那里继承。但你可以用Sass和Less变得聪明。此解决方案还可能存在可访问性问题。

我不建议在任何地方使用。但它在某些情况下应该相当有用。