我很难理解字体缩放。
我目前有一个字体大小为100%的网站。但这是100%的吗？这似乎是在16个像素处计算出来的。
我的印象是，100%会以某种方式指代浏览器窗口的大小，但显然不是因为无论窗口大小调整为移动宽度还是宽屏桌面，都是16像素。
如何使站点上的文本与其容器相关？我尝试过使用它们，但这也无法扩展。
我的理由是，当你调整大小时，像我的菜单这样的东西会变得压扁，所以我需要减少.menuItem等元素相对于容器宽度的px字体大小。（例如，在大型桌面上的菜单中，22px的效果非常好。向下移动到平板电脑宽度，16px更合适。）
我知道我可以添加断点，但我真的希望文本能够缩放并具有额外的断点，否则，我将以每100像素宽度减少数百个断点来控制文本。
当前回答
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>
其他回答
作为JavaScript回退（或您唯一的解决方案），您可以使用我的jQueryScalem插件，它允许您通过传递引用选项相对于父元素（容器）进行缩放。
100%是相对于基本字体大小的，如果您没有设置它，它将是浏览器的用户代理默认值。
为了获得您想要的效果，我将使用一段JavaScript代码来相对于窗口尺寸调整基本字体大小。
尝试使用fitText插件，因为Viewport大小并不能解决这个问题。
只需添加库：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
并通过设置文本系数来更改字体大小以正确：
$("#text_div").fitText(0.8);
您可以设置文本的最大值和最小值：
$("#text_div").fitText(0.8, { minFontSize: '12px', maxFontSize: '36px' });
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>
对于动态文本，此插件非常有用：
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();
