我很难理解字体缩放。
我目前有一个字体大小为100%的网站。但这是100%的吗？这似乎是在16个像素处计算出来的。
我的印象是，100%会以某种方式指代浏览器窗口的大小，但显然不是因为无论窗口大小调整为移动宽度还是宽屏桌面，都是16像素。
如何使站点上的文本与其容器相关？我尝试过使用它们，但这也无法扩展。
我的理由是，当你调整大小时，像我的菜单这样的东西会变得压扁，所以我需要减少.menuItem等元素相对于容器宽度的px字体大小。（例如，在大型桌面上的菜单中，22px的效果非常好。向下移动到平板电脑宽度，16px更合适。）
我知道我可以添加断点，但我真的希望文本能够缩放并具有额外的断点，否则，我将以每100像素宽度减少数百个断点来控制文本。
当前回答
使用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公司
其他回答
带有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表示视口的全宽，在滚动条下延伸（内容无法扩展。
在我的一个项目中，我使用vw和vh之间的“混合”来根据我的需要调整字体大小，例如：
font-size: calc(3vw + 3vh);
我知道这不能回答OP的问题，但也许它可以解决其他人的问题。
在艺术上，如果您需要在相同的宽度内放置两行或多行文本，而不管它们的字符数如何，那么您有很好的选择。
最好找到一个动态解决方案，这样无论输入什么文本，我们都会得到一个很好的显示。
让我们看看我们可以如何接近。
var els=document.querySelectorAll（“.divtext”），refWidth=els[0].clientWidth，refFontSize=parseFloat（window.getComputedStyle（els[0]，null）.getPropertyValue（“字号”）；els.forEach（（el，i）=>el.style.fontSize=refFontSize*refWidth/els[i].clientWidth+“px”）#集装箱{显示：内联块；背景色：黑色；衬垫：0.6vw 1.2vw；}.div文本{显示：表格；颜色：白色；字体系列：影响；字体大小：4.5vw；}<div id=“container”><div class=“divtext”>这只是一个</div><div class=“divtext”>示例</div><div class=“divtext”>向您展示</div><div class=“divtext”>您想要</div></div>
我们所做的只是获取第一行的宽度（els[0].clientWidth）和字体大小（parseFloat（window.getComputedStyle（els[0]，null）.getPropertyValue（“字体大小”））作为引用，然后计算后续行的字体大小。
100%是相对于基本字体大小的，如果您没有设置它，它将是浏览器的用户代理默认值。
为了获得您想要的效果，我将使用一段JavaScript代码来相对于窗口尺寸调整基本字体大小。
SVG解决方案：
.树脂土{调整大小：两者；边距：0；填充：0；高度：75px；宽度：500px；背景色：浅蓝色；溢出：隐藏；}<div class=“resizeme”><svg宽度=“100%”高度=“100%”viewBox=“0 0 500 75”preserveAspectRatio=“xMinYMid满足”style=“背景色：绿色”xmlns=“http://www.w3.org/2000/svg"xmlns:xlink=“http://www.w3.org/1999/xlink"><文本x=“0”y=“75”font size=“75”fill=“黑色”>█调整此大小█</文本></svg></div>
使用foreignObject的SVG和文本换行解决方案：
.树脂土{调整大小：两者；边距：0；填充：0；高度：200px；宽度：500px；背景色：浅蓝色；溢出：隐藏；}<div class=“resizeme”><svg宽度=“100%”高度=“100%”viewBox=“0 0 500 200”preserveAspectRatio=“xMinYMin满足”><foreignObject width=“100%”height=“100%”xmlns=“http://www.w3.org/1999/xhtml"><div xmlns=“http://www.w3.org/1999/xhtml“style=”背景色：浅绿色；"><h1>标题</h1><p>调整蓝色框的大小</p＞</div></foreignObject></svg></div>
