我很难理解字体缩放。
我目前有一个字体大小为100%的网站。但这是100%的吗？这似乎是在16个像素处计算出来的。
我的印象是，100%会以某种方式指代浏览器窗口的大小，但显然不是因为无论窗口大小调整为移动宽度还是宽屏桌面，都是16像素。
如何使站点上的文本与其容器相关？我尝试过使用它们，但这也无法扩展。
我的理由是，当你调整大小时，像我的菜单这样的东西会变得压扁，所以我需要减少.menuItem等元素相对于容器宽度的px字体大小。（例如，在大型桌面上的菜单中，22px的效果非常好。向下移动到平板电脑宽度，16px更合适。）
我知道我可以添加断点，但我真的希望文本能够缩放并具有额外的断点，否则，我将以每100像素宽度减少数百个断点来控制文本。
当前回答
直接媒体查询似乎是一种更简单、更容易理解的解决方案，可以根据容器大小调整字体大小，而容器大小可能是动态的。
下面将根据容器的大小调整字体大小，无论容器是否缩放到视口的大小，或是否已达到其最大值。如果您有非100%宽的容器，可以相应地调整vw。
.container {
width: 100%;
max-width: 600px;
}
.headline {
font-size: 20vw;
}
.subhead {
font-size: 5vw;
}
@media (min-width:600px) {
.headline {
font-size: 120px;
}
.subhead {
font-size: 32px;
}
}
其他回答
这个问题有一个大的哲学。
最简单的方法是给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。
100%是相对于基本字体大小的，如果您没有设置它，它将是浏览器的用户代理默认值。
为了获得您想要的效果，我将使用一段JavaScript代码来相对于窗口尺寸调整基本字体大小。
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>
我看不到任何关于CSS flex属性的答案，但它也非常有用。
在CSS内部，尝试在底部添加此项，更改320像素的宽度，以适应设计开始中断的位置：
@media only screen and (max-width: 320px) {
body { font-size: 1em; }
}
然后根据需要以“px”或“em”表示字体大小。
