我很难理解字体缩放。
我目前有一个字体大小为100%的网站。但这是100%的吗？这似乎是在16个像素处计算出来的。
我的印象是，100%会以某种方式指代浏览器窗口的大小，但显然不是因为无论窗口大小调整为移动宽度还是宽屏桌面，都是16像素。
如何使站点上的文本与其容器相关？我尝试过使用它们，但这也无法扩展。
我的理由是，当你调整大小时，像我的菜单这样的东西会变得压扁，所以我需要减少.menuItem等元素相对于容器宽度的px字体大小。（例如，在大型桌面上的菜单中，22px的效果非常好。向下移动到平板电脑宽度，16px更合适。）
我知道我可以添加断点，但我真的希望文本能够缩放并具有额外的断点，否则，我将以每100像素宽度减少数百个断点来控制文本。
当前回答
在我的一个项目中，我使用vw和vh之间的“混合”来根据我的需要调整字体大小，例如：
font-size: calc(3vw + 3vh);
我知道这不能回答OP的问题，但也许它可以解决其他人的问题。
其他回答
如果容器不是主体，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中的熔融铅
如果要将其放入特定容器（如div）中，请使用：
width: max-content;
调整字体大小也有很大帮助，例如字体大小：75%。
在CSS内部，尝试在底部添加此项，更改320像素的宽度，以适应设计开始中断的位置：
@media only screen and (max-width: 320px) {
body { font-size: 1em; }
}
然后根据需要以“px”或“em”表示字体大小。
这对我有用：
我尝试根据设置“字体大小：10px”得到的宽度/高度来近似字体大小。基本上，这个想法是“如果我有20像素宽和11像素高的‘字体大小：10px’，那么计算50像素宽和30像素高的容器的最大字体大小是多少？”
答案是双重比例制：
{20:10=50:X，11:10=30:Y}={X=（10*50）/20，Y=（10*30）/11}
现在X是与宽度匹配的字体大小，Y是与高度匹配的字体尺寸；取最小值
function getMaxFontSizeApprox(el){
var fontSize = 10;
var p = el.parentNode;
var parent_h = p.offsetHeight ? p.offsetHeight : p.style.pixelHeight;
if(!parent_h)
parent_h = 0;
var parent_w = p.offsetHeight ? p.offsetWidth : p.style.pixelWidth;
if(!parent_w)
parent_w = 0;
el.style.fontSize = fontSize + "px";
var el_h = el.offsetHeight ? el.offsetHeight : el.style.pixelHeight;
if(!el_h)
el_h = 0;
var el_w = el.offsetHeight ? el.offsetWidth : el.style.pixelWidth;
if(!el_w)
el_w = 0;
// 0.5 is the error on the measure that JavaScript does
// if the real measure had been 12.49 px => JavaScript would have said 12px
// so we think about the worst case when could have, we add 0.5 to
// compensate the round error
var fs1 = (fontSize*(parent_w + 0.5))/(el_w + 0.5);
var fs2 = (fontSize*(parent_h) + 0.5)/(el_h + 0.5);
fontSize = Math.floor(Math.min(fs1,fs2));
el.style.fontSize = fontSize + "px";
return fontSize;
}
注意：函数的参数必须是span元素或小于其父元素的元素，否则如果子元素和父元素都具有相同的宽度/高度，则函数将失败。
此web组件更改字体大小，使内部文本宽度与容器宽度匹配。查看演示。
您可以这样使用：
<full-width-text>Lorem Ipsum</full-width-text>
