编辑:如果容器不是主体，CSS技巧涵盖了您的所有选项，以适合文本到容器。

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

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

这些值为:

• VW（视区宽度的%）
• VH（视区高度的%）
• vi（根元素内联轴方向上视口大小的1%)
• VB(1%viewport大小在根元素的块轴方向上）
• Vmin（Vw或Vh中较小者）
• Vmax（较大值或Vw或Vh)

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

使用它的方式如下所示:

p {
    font-size: 4vw;
}

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

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

浏览器支持非常好，但您可能需要一个备用功能，例如:

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

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

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

这里有一篇关于设置最小/最大尺寸并对尺寸进行更多控制的文章:对响应式排版的精确控制

这里有一篇关于使用calc（）设置您的大小以便文本填充视口的文章:http://codepen.io/crocodillon/pen/fbjxu

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

这个问题是Alex在接受答案下的评论中提出的。

这个事实并不意味着vw在某种程度上不能用于该容器的大小。现在，要看到任何变化，我们必须假设容器的大小在某种程度上是灵活的。无论是通过直接百分比宽度还是通过100%减去边距。如果容器始终设置为200px宽，则该点将变得“无意义”--那么只需设置一个适用于该宽度的font-size即可。

实施例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是body的子级，它是100%宽度的50%，在这种基本情况下是视口大小。基本上，您想要设置一个VW，这将是一个好看的您。正如你在上面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%宽度，那么同时，font-size将需要在媒体查询中或通过JavaScript调整到5vw*.25=1.25的新计算值。这将使文本大小保持在与原始50%容器的“宽度”从视口大小缩小一半时相同的大小，但现在由于其自身百分比计算的变化而减小了。

挑战

在使用CSS3calc()函数时，动态调整将变得困难，因为该函数此时不适用于font-size目的。因此，如果宽度在calc()上发生变化，则无法进行纯CSS ；3调整。当然，对页边距的宽度稍作调整可能不足以保证对font-size进行任何更改，因此可能无关紧要。

null

.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>