使用vw，em&co.确实有效，但IMO始终需要人为的微调。

这是我刚刚根据@tnt-rox的回答编写的一个脚本，它试图使人类的触摸自动化：

$（'#controller'）.click（function（）{$（'h2'）.each（函数）{变量$el=$（此），max=$el.get（0），el=空;最大值=最大值? 最大偏移宽度: 320;$el.css({“font size”：“1em”，“display”：“inline”，});el=$el.get（0）；el.get_float=函数（）{变量fs=0;if（this.style&&this.style.fontSize）{fs=parseFloat（this.style.fontSize.replace（/（[\d\.]+）em/g，'$1'））；}返回fs；};el.bigger=函数（）{this.style.fontSize=（this.get_float（）+0.1）+'em'；};而（el.offsetWidth<max）{el.bigger（）；}//完成触摸。$el.css({“字体大小”：（（el.get_float（）-0.1）+'em'），'线条高度'：'正常'，'显示'：''，});}); // 结束（每个）}); // 结束（字体缩放测试）第二部分{宽度：50%；背景色：番茄；字体系列：'Arial'；}氢气{空白：nowrap；}h2：第n个孩子（2）{字体样式：斜体；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js“></script><input type=“button”id=“controller”value=“Apply”/>＜div＞<h2>Lorem ipsum dolor公司</h2><h2>测试字符串</h2><h2>甜蜜串联</h2><h2>字体缩放比例</h2></div>

它基本上将字体大小减小到1em，然后开始递增0.1，直到达到最大宽度。

JSFiddle公司

功能如下：

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/

如果容器不是主体，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中的熔融铅

纯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变得聪明。此解决方案还可能存在可访问性问题。

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

对于动态文本，此插件非常有用：

http://freqdec.github.io/slabText/

只需添加CSS：

.slabtexted .slabtext
{
    display: -moz-inline-box;
    display: inline-block;
    white-space: nowrap;
}
.slabtextinactive .slabtext
{
    display: inline;
    white-space: normal;
    font-size: 1em !important;
    letter-spacing: inherit !important;
    word-spacing: inherit !important;
    *letter-spacing: normal !important;
    *word-spacing: normal !important;
}
.slabtextdone .slabtext
{
    display: block;
}

还有脚本：

$('#mydiv').slabText();

这可能不太实用，但如果您希望字体是父级的直接函数，而不需要任何JavaScript侦听/循环（interval）来读取div/页面的大小，那么有一种方法可以做到。Iframes。

iframe中的任何内容都会将iframe的大小视为视口的大小。因此，诀窍是创建一个iframe，其宽度是您希望文本达到的最大宽度，其高度等于特定文本的最大高度*纵横比。

抛开视口单位不能与文本的父单位一起出现的限制（如中所示，具有与其他所有单位相同的%大小），视口单位确实提供了一个非常强大的工具：能够获得最小/最大尺寸。你不能在其他地方这样做-你不能说。。。使这个div的高度等于父对象的宽度。

也就是说，诀窍是使用vmin，并设置iframe大小，当高度是限制维度时，[fract]*总高度是一个好的字体大小，而当宽度是限制维度的时候，[fract]*总宽度。这就是为什么高度必须是宽度和纵横比的乘积。

对于我的特定示例

.main iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: calc(3.5 * 100%);
  background: rgba(0, 0, 0, 0);
  border-style: none;
  transform: translate3d(-50%, -50%, 0);
}

这种方法的一个小烦恼是，您必须手动设置iframe的CSS。如果您附加整个CSS文件，这将占用许多文本区域的大量带宽。所以，我所做的是直接从CSS中附加我想要的规则。

var rule = document.styleSheets[1].rules[4];
var iDoc = document.querySelector('iframe').contentDocument;
iDoc.styleSheets[0].insertRule(rule.cssText);

您可以编写一个小函数来获取CSS规则/所有影响文本区域的CSS规则。

如果没有一些循环/聆听JavaScript，我想不出另一种方法。真正的解决方案是让浏览器提供一种根据父容器缩放文本的方式，并提供相同的vmin/vmax类型功能。

JSFiddle：https://jsfiddle.net/0jr7rrgm/3/（单击一次可将红色方块锁定在鼠标上，再次单击可释放）

大部分JavaScript都是我自定义的点击拖动功能。