我很难理解字体缩放。
我目前有一个字体大小为100%的网站。但这是100%的吗？这似乎是在16个像素处计算出来的。
我的印象是，100%会以某种方式指代浏览器窗口的大小，但显然不是因为无论窗口大小调整为移动宽度还是宽屏桌面，都是16像素。
如何使站点上的文本与其容器相关？我尝试过使用它们，但这也无法扩展。
我的理由是，当你调整大小时，像我的菜单这样的东西会变得压扁，所以我需要减少.menuItem等元素相对于容器宽度的px字体大小。（例如，在大型桌面上的菜单中，22px的效果非常好。向下移动到平板电脑宽度，16px更合适。）
我知道我可以添加断点，但我真的希望文本能够缩放并具有额外的断点，否则，我将以每100像素宽度减少数百个断点来控制文本。
当前回答
你可能正在寻找这样的东西：
http://jsfiddle.net/sijav/dGsC9/4/ http://fiddle.jshell.net/sijav/dGsC9/4/show/
我使用过flowtype，它工作得很好（不过它是JavaScript而不是纯CSS解决方案）：
$('body').flowtype({
minFont: 10,
maxFont: 40,
minimum: 500,
maximum: 1200,
fontRatio: 70
});
其他回答
带有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，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公司
始终使元素具有此属性：
JavaScript:element.style.fontSize=“100%”；
or
CSS:style=“font-size:100%；”
当您进入全屏时，您应该已经计算了一个比例变量（比例>1或比例=1）。然后，在全屏幕上：
document.body.style.fontSize = (scale * 100) + "%";
它只需要很少的代码就可以很好地工作。
但如果容器不是视口（主体）呢？
真正的答案是transform属性允许您通过倾斜、旋转、平移或缩放来直观地操纵元素：
https://css-tricks.com/almanac/properties/t/transform/
如果问题是宽屏桌面上的字体太大，我认为最简单的CSS方法应该是这样的（假设包装器最大宽度为1000像素）
.specialText{
font-size: 2.4vw;
}
@media only screen and (min-width: 1000px) {
.specialText {
width: 24px;
}
}
因此，它可以自动调整大小，以适应任何小于容器最大宽度的屏幕，当屏幕更宽时（几乎所有台式机和笔记本电脑），它可以固定大小。
