我很难理解字体缩放。
我目前有一个字体大小为100%的网站。但这是100%的吗？这似乎是在16个像素处计算出来的。
我的印象是，100%会以某种方式指代浏览器窗口的大小，但显然不是因为无论窗口大小调整为移动宽度还是宽屏桌面，都是16像素。
如何使站点上的文本与其容器相关？我尝试过使用它们，但这也无法扩展。
我的理由是，当你调整大小时，像我的菜单这样的东西会变得压扁，所以我需要减少.menuItem等元素相对于容器宽度的px字体大小。（例如，在大型桌面上的菜单中，22px的效果非常好。向下移动到平板电脑宽度，16px更合适。）
我知道我可以添加断点，但我真的希望文本能够缩放并具有额外的断点，否则，我将以每100像素宽度减少数百个断点来控制文本。
当前回答
作为JavaScript回退（或您唯一的解决方案），您可以使用我的jQueryScalem插件，它允许您通过传递引用选项相对于父元素（容器）进行缩放。
其他回答
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>
我自己的解决方案，基于jQuery，通过逐渐增加字体大小来工作，直到容器的高度大大增加（这意味着它有换行符）。
它很简单，但工作得很好，而且非常容易使用。您不必了解所使用的字体，一切都由浏览器处理。
你可以在上面玩http://jsfiddle.net/tubededentifrice/u5y15d0L/2/
神奇就发生在这里：
var setMaxTextSize=function(jElement) {
// Get and set the font size into data for reuse upon resize
var fontSize=parseInt(jElement.data(quickFitFontSizeData)) || parseInt(jElement.css("font-size"));
jElement.data(quickFitFontSizeData, fontSize);
// Gradually increase font size until the element gets a big increase in height (i.e. line break)
var i = 0;
var previousHeight;
do
{
previousHeight=jElement.height();
jElement.css("font-size", "" + (++fontSize) + "px");
}
while(i++ < 300 && jElement.height()-previousHeight < fontSize/2)
// Finally, go back before the increase in height and set the element as resized by adding quickFitSetClass
fontSize -= 1;
jElement.addClass(quickFitSetClass).css("font-size", "" + fontSize + "px");
return fontSize;
};
如果问题是宽屏桌面上的字体太大，我认为最简单的CSS方法应该是这样的（假设包装器最大宽度为1000像素）
.specialText{
font-size: 2.4vw;
}
@media only screen and (min-width: 1000px) {
.specialText {
width: 24px;
}
}
因此，它可以自动调整大小，以适应任何小于容器最大宽度的屏幕，当屏幕更宽时（几乎所有台式机和笔记本电脑），它可以固定大小。
在艺术上，如果您需要在相同的宽度内放置两行或多行文本，而不管它们的字符数如何，那么您有很好的选择。
最好找到一个动态解决方案，这样无论输入什么文本，我们都会得到一个很好的显示。
让我们看看我们可以如何接近。
var els=document.querySelectorAll（“.divtext”），refWidth=els[0].clientWidth，refFontSize=parseFloat（window.getComputedStyle（els[0]，null）.getPropertyValue（“字号”）；els.forEach（（el，i）=>el.style.fontSize=refFontSize*refWidth/els[i].clientWidth+“px”）#集装箱{显示：内联块；背景色：黑色；衬垫：0.6vw 1.2vw；}.div文本{显示：表格；颜色：白色；字体系列：影响；字体大小：4.5vw；}<div id=“container”><div class=“divtext”>这只是一个</div><div class=“divtext”>示例</div><div class=“divtext”>向您展示</div><div class=“divtext”>您想要</div></div>
我们所做的只是获取第一行的宽度（els[0].clientWidth）和字体大小（parseFloat（window.getComputedStyle（els[0]，null）.getPropertyValue（“字体大小”））作为引用，然后计算后续行的字体大小。
尝试使用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' });
