容器查询现在可能是最好的选择，具体取决于您的用例，并且所有主要浏览器都支持。请参阅此处的支持级别：https://caniuse.com/mdn-css_properties_container https://caniuse.com/mdn-css_properties_container
现在很容易控制
.module h2 {
font-size: 1em;
container-name: sidebar
}
@container sidebar (min-width: 700px) {
.module h2 {
font-size: 2em;
}
}
请查看有关容器查询的 MDN 文章了解更多详细信息：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries 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/ https://css-tricks.com/a-few-times-container-size-queries-would-have-helped-me-out/
=========================
旧答案
如果容器不是主体，CSS 技巧涵盖了您的所有选项使文本适合容器 https://css-tricks.com/fitting-text-to-a-container/.
如果容器是身体，那么你要寻找的是视口百分比长度 http://dev.w3.org/csswg/css-values/#viewport-relative-lengths:
The 视口百分比长度是相对于的大小初始包含块 https://www.w3.org/TR/CSS21/visudet.html#containing-block-details。当初始包含块的高度或宽度更改时，它们会相应地缩放。然而，当根元素上的overflow值为auto时，任何滚动条都被假定不存在。
这些值为：
-
vw（视口宽度的%）
-
vh（视口高度的%）
-
vi（根元素内联轴方向视口大小的 1%）
-
vb（根元素块轴方向视口大小的 1%）
-
vmin（较小的vw or vh)
-
vmax（较大或vw or vh)
1 v* 等于初始包含块的 1%。
使用它看起来像这样：
p {
font-size: 4vw;
}
正如您所看到的，当视口宽度增加时，font-size，无需使用媒体查询。
这些值是一个尺寸单位，就像px or em，因此它们也可用于调整其他元素的大小，例如宽度、边距或填充。
浏览器支持非常好，但您可能需要备用，例如：
p {
font-size: 16px;
font-size: 4vw;
}
查看支持统计数据：http://caniuse.com/#feat=viewport-units http://caniuse.com/#feat=viewport-units.
另外，请查看 CSS-Tricks 以获取更广泛的了解：视口大小的版式 http://css-tricks.com/viewport-sized-typography/
这是一篇关于设置最小/最大尺寸以及对尺寸进行更多控制的好文章：精确控制响应式排版 http://madebymike.com.au/writing/precise-control-responsive-typography/
这里有一篇关于使用 calc() 设置大小以使文本填充视口的文章：http://codepen.io/CrocoDillon/pen/fBJxu http://codepen.io/CrocoDillon/pen/fBJxu
另外，请查看这篇文章，它也使用一种称为“moltenleading”的技术来调整行高。Molten 在 CSS 领域处于领先地位 https://css-tricks.com/molten-leading-css/
