我很难理解字体缩放。
我目前有一个字体大小为100%的网站。但这是100%的吗？这似乎是在16个像素处计算出来的。
我的印象是，100%会以某种方式指代浏览器窗口的大小，但显然不是因为无论窗口大小调整为移动宽度还是宽屏桌面，都是16像素。
如何使站点上的文本与其容器相关？我尝试过使用它们，但这也无法扩展。
我的理由是，当你调整大小时，像我的菜单这样的东西会变得压扁，所以我需要减少.menuItem等元素相对于容器宽度的px字体大小。（例如，在大型桌面上的菜单中，22px的效果非常好。向下移动到平板电脑宽度，16px更合适。）
我知道我可以添加断点，但我真的希望文本能够缩放并具有额外的断点，否则，我将以每100像素宽度减少数百个断点来控制文本。
当前回答
在我的一个项目中，我使用vw和vh之间的“混合”来根据我的需要调整字体大小，例如：
font-size: calc(3vw + 3vh);
我知道这不能回答OP的问题，但也许它可以解决其他人的问题。
其他回答
如果这对任何人都有帮助的话，本线程中的大多数解决方案都是将文本包装成多行，形式为e。
但后来我发现了这一点，它奏效了：
https://github.com/chunksnbits/jquery-quickfit
示例用法：
$（'.someText'）.quickfit（｛max:50，公差：.4｝）
我刚刚创建了一个演示如何做到这一点。它使用transform:scale（）来实现这一点，并使用一些监视元素大小调整的JS。非常适合我的需要。
容器查询是CSS功能集（2022年末）的最新添加，使这一点变得简单明了。
它们允许您基于包含元素的大小应用样式，但也提供了一组用于容器查询宽度/高度的新CSS单元cqw/cqh。要使用它们，需要在要使用其大小的父元素上设置容器类型属性。下面是一个最小的示例：
＜div＞<p>Lorem ipsum dolor坐amet</p></div><style>第二部分{容器类型：内联大小；}p型{字体大小：5cqw；}</style>
随着父容器的增长，字体大小将平稳增加。在1000像素的容器宽度下，p字体大小将为1000像素/100*5=50像素。
容器类型可以是大小或内联大小。size跟踪容器的高度和宽度，允许您同时使用cqw和cqh。在网络上的大多数时间，高度是根据内容计算的，您只需指定宽度。为了节省浏览器的一些工作，您通常需要设置容器类型：inline-size；因此，浏览器只跟踪通常为宽度的内联维度（除非将写入模式设置为垂直）。
2022年下半年，浏览器对容器查询的支持快速增长，目前为75%（2023-01-01）。
这个呢？将父级的字体大小设置为等于其宽度，然后使用文本元素字体大小的百分比。
.element {
width: 400px;
font-size: 400px; /* equal to width */
}
.text {
width: 10%; /* will be 40px */
}
我发现这非常简单，特别是当你处理图标时，但也适用于文本。
/*造型的开始*/* {边距：0；填充：0；框大小调整：边框框；}.box格式{显示：块；背景：矢车菊蓝；高度：最大含量；边距底部：32px；}/*样式结束*/.方框p{字体大小：20%；}<div class=“box”style=“width:400px；font-size:400px”><p>文本</p></div><div class=“box”style=“width:128px；font-size:128px”><p>文本</p></div><div class=“box”style=“width:10vw；font-size:10vw”><p>文本</p></div><div class=“box”style=“width:64px；font-size:64px”><p>文本</p></div>
这个问题有一个大的哲学。
最简单的方法是给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。
