我很难理解字体缩放。
我目前有一个字体大小为100%的网站。但这是100%的吗？这似乎是在16个像素处计算出来的。
我的印象是，100%会以某种方式指代浏览器窗口的大小，但显然不是因为无论窗口大小调整为移动宽度还是宽屏桌面，都是16像素。
如何使站点上的文本与其容器相关？我尝试过使用它们，但这也无法扩展。
我的理由是，当你调整大小时，像我的菜单这样的东西会变得压扁，所以我需要减少.menuItem等元素相对于容器宽度的px字体大小。（例如，在大型桌面上的菜单中，22px的效果非常好。向下移动到平板电脑宽度，16px更合适。）
我知道我可以添加断点，但我真的希望文本能够缩放并具有额外的断点，否则，我将以每100像素宽度减少数百个断点来控制文本。
当前回答
这个问题有一个大的哲学。
最简单的方法是给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。
其他回答
这个问题有一个大的哲学。
最简单的方法是给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。
如果问题是宽屏桌面上的字体太大，我认为最简单的CSS方法应该是这样的（假设包装器最大宽度为1000像素）
.specialText{
font-size: 2.4vw;
}
@media only screen and (min-width: 1000px) {
.specialText {
width: 24px;
}
}
因此，它可以自动调整大小，以适应任何小于容器最大宽度的屏幕，当屏幕更宽时（几乎所有台式机和笔记本电脑），它可以固定大小。
我刚刚创建了一个演示如何做到这一点。它使用transform:scale（）来实现这一点，并使用一些监视元素大小调整的JS。非常适合我的需要。
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>
对于动态文本，此插件非常有用：
http://freqdec.github.io/slabText/
只需添加CSS：
.slabtexted .slabtext
{
display: -moz-inline-box;
display: inline-block;
white-space: nowrap;
}
.slabtextinactive .slabtext
{
display: inline;
white-space: normal;
font-size: 1em !important;
letter-spacing: inherit !important;
word-spacing: inherit !important;
*letter-spacing: normal !important;
*word-spacing: normal !important;
}
.slabtextdone .slabtext
{
display: block;
}
还有脚本：
$('#mydiv').slabText();
