我很难理解字体缩放。
我目前有一个字体大小为100%的网站。但这是100%的吗？这似乎是在16个像素处计算出来的。
我的印象是，100%会以某种方式指代浏览器窗口的大小，但显然不是因为无论窗口大小调整为移动宽度还是宽屏桌面，都是16像素。
如何使站点上的文本与其容器相关？我尝试过使用它们，但这也无法扩展。
我的理由是，当你调整大小时，像我的菜单这样的东西会变得压扁，所以我需要减少.menuItem等元素相对于容器宽度的px字体大小。（例如，在大型桌面上的菜单中，22px的效果非常好。向下移动到平板电脑宽度，16px更合适。）
我知道我可以添加断点，但我真的希望文本能够缩放并具有额外的断点，否则，我将以每100像素宽度减少数百个断点来控制文本。
当前回答
我刚刚创建了一个演示如何做到这一点。它使用transform:scale（）来实现这一点，并使用一些监视元素大小调整的JS。非常适合我的需要。
其他回答
100%是相对于基本字体大小的，如果您没有设置它，它将是浏览器的用户代理默认值。
为了获得您想要的效果，我将使用一段JavaScript代码来相对于窗口尺寸调整基本字体大小。
在CSS内部，尝试在底部添加此项，更改320像素的宽度，以适应设计开始中断的位置：
@media only screen and (max-width: 320px) {
body { font-size: 1em; }
}
然后根据需要以“px”或“em”表示字体大小。
纯CSS在某种程度上是可能的。
.自动调整文本大小{content:url（“data:image/svg+xml；utf8，<svg xmlns='http://www.w3.org/2000/svg'version='1.1'height='1.3em'width='10em'><text x='0'y='0.9em'fill='red'>这里是调整大小的文本</text></svg>“）；背景色：rgba（0,0,0,0.06）；动画：成长2s无限交替两者；}@关键帧增长{来自｛width:100px；｝到｛width:300px；｝}<div class=“自动调整文本大小”></div>
解释
内容规则设置元素的内容，它可以是图像的URL，包括SVG图像。SVG图像可以包含文本，因此基本上您有一个带有文本的背景图像，该图像根据其父图像的大小调整大小。您也可以使用background image属性，但与内容不同，它不会影响元素的布局，因此您需要定义父元素的大小。
这种方法的问题是，您需要定义SVG中文本的颜色、大小和位置。他们不会从父母那里继承。但你可以用Sass和Less变得聪明。此解决方案还可能存在可访问性问题。
我不建议在任何地方使用。但它在某些情况下应该相当有用。
我看不到任何关于CSS flex属性的答案，但它也非常有用。
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>
