我很难理解字体缩放。
我目前有一个字体大小为100%的网站。但这是100%的吗？这似乎是在16个像素处计算出来的。
我的印象是，100%会以某种方式指代浏览器窗口的大小，但显然不是因为无论窗口大小调整为移动宽度还是宽屏桌面，都是16像素。
如何使站点上的文本与其容器相关？我尝试过使用它们，但这也无法扩展。
我的理由是，当你调整大小时，像我的菜单这样的东西会变得压扁，所以我需要减少.menuItem等元素相对于容器宽度的px字体大小。（例如，在大型桌面上的菜单中，22px的效果非常好。向下移动到平板电脑宽度，16px更合适。）
我知道我可以添加断点，但我真的希望文本能够缩放并具有额外的断点，否则，我将以每100像素宽度减少数百个断点来控制文本。
当前回答
如果要将其放入特定容器（如div）中，请使用：
width: max-content;
调整字体大小也有很大帮助，例如字体大小：75%。
其他回答
如果问题是宽屏桌面上的字体太大，我认为最简单的CSS方法应该是这样的（假设包装器最大宽度为1000像素）
.specialText{
font-size: 2.4vw;
}
@media only screen and (min-width: 1000px) {
.specialText {
width: 24px;
}
}
因此，它可以自动调整大小，以适应任何小于容器最大宽度的屏幕，当屏幕更宽时（几乎所有台式机和笔记本电脑），它可以固定大小。
作为JavaScript回退（或您唯一的解决方案），您可以使用我的jQueryScalem插件，它允许您通过传递引用选项相对于父元素（容器）进行缩放。
我刚刚创建了一个演示如何做到这一点。它使用transform:scale（）来实现这一点，并使用一些监视元素大小调整的JS。非常适合我的需要。
这个问题有一个大的哲学。
最简单的方法是给body指定一个特定的字体大小（我建议10），然后所有其他元素的字体都是em或rem。我会给你一个例子来理解这些单位。Em始终相对于其父级：
body{font-size: 10px;}
.menu{font-size: 2em;} /* That means 2*10 pixels = 20 pixels */
.menu li{font-size: 1.5em;} /* That means 1.5*20 pixels = 30 pixels */
Rem始终相对于身体：
body{font-size: 10px;}
.menu{font-size: 2rem;} /* That means 2*10 pixels = 20 pixels */
.menu li{font-size: 1.5rem;} /* that means 1.5*10 pixels = 15 pixels */
然后，您可以创建一个脚本，该脚本将根据容器宽度修改字体大小。但这不是我要推荐的。例如，在一个900像素宽的容器中，你会有一个字体大小为12像素的p元素。根据你的想法，它将变成一个300像素宽的容器，字体大小为4像素。必须有一个下限。
其他解决方案是媒体查询，这样您就可以为不同的宽度设置字体。
但我推荐的解决方案是使用一个JavaScript库来帮助您实现这一点。还有到目前为止我找到的fitext.js。
您可以插入窗口宽度的字体大小：
font-size: calc(
${minFontSizeInPixel} *
(
1px -
clamp(
0px,
(100vw - ${minWindowWidth}px) /
(${maxWindowWidth} - ${minWindowWidth}),
1px
)
) + ${maxFontSizeInPixel} *
clamp(
0px,
(100vw - ${minWindowWidth}px) /
(${maxWindowWidth} - ${minWindowWidth}),
1px
)
);
