我很难理解字体缩放。
我目前有一个字体大小为100%的网站。但这是100%的吗？这似乎是在16个像素处计算出来的。
我的印象是，100%会以某种方式指代浏览器窗口的大小，但显然不是因为无论窗口大小调整为移动宽度还是宽屏桌面，都是16像素。
如何使站点上的文本与其容器相关？我尝试过使用它们，但这也无法扩展。
我的理由是，当你调整大小时，像我的菜单这样的东西会变得压扁，所以我需要减少.menuItem等元素相对于容器宽度的px字体大小。（例如，在大型桌面上的菜单中，22px的效果非常好。向下移动到平板电脑宽度，16px更合适。）
我知道我可以添加断点，但我真的希望文本能够缩放并具有额外的断点，否则，我将以每100像素宽度减少数百个断点来控制文本。
当前回答
容器查询是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）。
其他回答
let textElement=document.getElementById（'text1'）；let parentElement=textElement.parentElement；const parentClientHeight=parentElement.clientHeight；const parentClientWidth=parentElement.clientWidth；textElement.style.padding=“未设置”；textElement.style.margin=“自动”；let fontSize=parentClientHeight；设minFS＝3，maxFS=fontSize；while（fontSize！=minFS）{textElement.style.fontSize=`${fontSize｝px`；如果(parentElement.scrollHeight<=parentClientHeight&&parentElement.scrollWidth<=parentClientWidth) {minFS=字体大小；}其他{maxFS=fontSize；}fontSize=数学楼层（（minFS+maxFS）/2）；}textElement.style.fontSize=`${minFS｝像素'；<div style=“高度：200px；宽度：300px；”><div id='text1'>测验</div></div>
您可以插入窗口宽度的字体大小：
font-size: calc(
${minFontSizeInPixel} *
(
1px -
clamp(
0px,
(100vw - ${minWindowWidth}px) /
(${maxWindowWidth} - ${minWindowWidth}),
1px
)
) + ${maxFontSizeInPixel} *
clamp(
0px,
(100vw - ${minWindowWidth}px) /
(${maxWindowWidth} - ${minWindowWidth}),
1px
)
);
100%是相对于基本字体大小的，如果您没有设置它，它将是浏览器的用户代理默认值。
为了获得您想要的效果，我将使用一段JavaScript代码来相对于窗口尺寸调整基本字体大小。
我看不到任何关于CSS flex属性的答案，但它也非常有用。
如果这对任何人都有帮助的话，本线程中的大多数解决方案都是将文本包装成多行，形式为e。
但后来我发现了这一点，它奏效了：
https://github.com/chunksnbits/jquery-quickfit
示例用法：
$（'.someText'）.quickfit（｛max:50，公差：.4｝）
