我很难理解字体缩放。
我目前这个网站的正文font-size为 100％。但是 100％的是什么？这似乎计算在 16px。
我的印象是，100％会以某种方式引用浏览器窗口的大小，但显然不是因为它总是 16px，无论窗口是否调整为移动宽度或完整的宽屏桌面。
如何使我的网站上的文本与其容器相关？我尝试使用em但这也没有扩展。
我的理由是，当你调整大小时，我的菜单之类的东西会变得模糊，所以我需要减少.menuItem的 px font-size以及与容器宽度相关的其他元素。 （例如，在大型桌面上的菜单中，22px 可以完美运行。向下移动到平板电脑宽度，16px 更合适。）
我知道我可以添加断点，但我真的希望文本可以扩展为具有额外的断点，否则我将最终为每 100px 宽度减少数百个断点来控制文本。
编辑：如果容器不是主体 CSS Tricks 涵盖了您的所有选项： https ： //css-tricks.com/fitting-text-to-a-container/
如果容器是正文，那么您要查找的是视口百分比长度 ：
视口百分比长度相对于初始包含块的大小。当初始包含块的高度或宽度改变时，它们相应地缩放。但是，当根元素上的溢出值为 auto 时，假定不存在任何滚动条。
价值观是：
vw （视口宽度的百分比） vh （视口高度的百分比） vi （根元素的内联轴方向视口大小的 1％） vb （根元素块轴方向上视口大小的 1％） 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-Tricks 以获得更广泛的外观： http ： //css-tricks.com/viewport-sized-typography/
这是一篇很好的文章，关于设置最小 / 最大尺寸并对尺寸进行更多控制： http ： //madebymike.com.au/writing/precise-control-responsive-typography/
这里有一篇关于使用 calc（）设置大小的文章，以便文本填充视口： http ： //codepen.io/CrocoDillon/pen/fBJxu
另外，请查看这篇文章，该文章使用了一种名为 “熔化前导” 的技术来调整线高。 https://css-tricks.com/molten-leading-css/
Alex 根据接受的答案在评论中提出了这个问题。
这个事实并不意味着vw在某种程度上不能用于该容器的大小。现在要看到任何变化都必须假设容器在某种程度上是灵活的。是通过直接百分比width还是通过 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 中的评论中所看到的，您可以通过数学方式 “思考” 整个视口大小，但您不需要这样做。文本将与容器 “flex”，因为容器在视口大小调整时弯曲。更新： 这是两个不同大小的容器的示例 。
例 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 为例。如果通过@media或 javascript 将div切换到25%宽度，那么同时， font-size需要在媒体查询中调整或通过 javascript 调整到5vw * .25 = 1.25的新计算。这将使文本大小与原始50%容器的 “宽度” 从视口大小减少一半时的大小相同，但现在由于其自身百分比计算的变化而减少。
一个挑战
使用CSS3 calc()函数时，将很难动态调整，因为此时该函数不适用于font-size 。因此，如果您的宽度在calc()上发生变化，则无法进行纯 CSS3 调整。当然，对边距宽度的微小调整可能不足以保证font-size任何变化，因此可能无关紧要。
我在我的一个项目中做的是在 vw 和 vh 之间的 “混合”，以根据我的需要调整字体大小，例如：
font-size: calc(3vw + 3vh);我知道这不能回答 op 的问题，但也许它可以成为其他任何人的解决方案。