我很难理解字体缩放。
我目前有一个字体大小为100%的网站。但这是100%的吗？这似乎是在16个像素处计算出来的。
我的印象是，100%会以某种方式指代浏览器窗口的大小，但显然不是因为无论窗口大小调整为移动宽度还是宽屏桌面，都是16像素。
如何使站点上的文本与其容器相关？我尝试过使用它们，但这也无法扩展。
我的理由是，当你调整大小时，像我的菜单这样的东西会变得压扁，所以我需要减少.menuItem等元素相对于容器宽度的px字体大小。（例如，在大型桌面上的菜单中，22px的效果非常好。向下移动到平板电脑宽度，16px更合适。）
我知道我可以添加断点，但我真的希望文本能够缩放并具有额外的断点，否则，我将以每100像素宽度减少数百个断点来控制文本。
当前回答
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>
其他回答
我的问题类似，但与标题内的文本缩放有关。我尝试了Fit Font，但我需要切换压缩器以获得任何结果，因为它解决了一个稍微不同的问题，就像文本流一样。
所以我写了我自己的小插件，它减小了字体大小以适应容器，假设你有溢出：隐藏和空白：nowrap，这样即使将字体减小到最小也不允许显示完整的标题，它也会切断它可以显示的内容。
(function($) {
// Reduces the size of text in the element to fit the parent.
$.fn.reduceTextSize = function(options) {
options = $.extend({
minFontSize: 10
}, options);
function checkWidth(em) {
var $em = $(em);
var oldPosition = $em.css('position');
$em.css('position', 'absolute');
var width = $em.width();
$em.css('position', oldPosition);
return width;
}
return this.each(function(){
var $this = $(this);
var $parent = $this.parent();
var prevFontSize;
while (checkWidth($this) > $parent.width()) {
var currentFontSize = parseInt($this.css('font-size').replace('px', ''));
// Stop looping if min font size reached, or font size did not change last iteration.
if (isNaN(currentFontSize) || currentFontSize <= options.minFontSize ||
prevFontSize && prevFontSize == currentFontSize) {
break;
}
prevFontSize = currentFontSize;
$this.css('font-size', (currentFontSize - 1) + 'px');
}
});
};
})(jQuery);
此web组件更改字体大小，使内部文本宽度与容器宽度匹配。查看演示。
您可以这样使用：
<full-width-text>Lorem Ipsum</full-width-text>
带有calc（）、CSS单位和数学的纯CSS解决方案
这并不是OP所要求的，但可能会让某人过得很愉快。这个答案并不容易，需要在开发者端进行一些研究。
我终于得到了一个纯CSS解决方案，它使用了不同单位的calc（）。您需要对公式有一些基本的数学理解，才能计算出calc（）的表达式。
当我完成这项工作时，我必须得到一个全页面宽度的响应标头，在DOM中填充一些父级。我将在这里使用我的值，用你自己的值替换它们。
数学
您需要：
在某些视口中，比例调整得很好。我使用了320个像素，因此我得到了24个像素高和224个像素宽，因此比率为9.333…或28/3容器宽度，我有填充物：3em和全宽，因此达到100wv-2*3em
X是容器的宽度，因此请用自己的表达式替换它，或调整值以获得整页文本。R是你的比率。您可以通过调整某些视口中的值、检查元素宽度和高度并将其替换为自己的值来获得它。此外，它是宽度/高度；）
x = 100vw - 2 * 3em = 100vw - 6em
r = 224px/24px = 9.333... = 28 / 3
y = x / r
= (100vw - 6em) / (28 / 3)
= (100vw - 6em) * 3 / 28
= (300vw - 18em) / 28
= (75vw - 4.5rem) / 7
砰！成功了！我写了
font-size: calc((75vw - 4.5rem) / 7)
到我的标题，它在每个视口中都调整得很好。
但它是如何工作的？
我们需要一些常量。100vw表示视口的全宽，我的目标是建立带有一些填充的全宽标头。
比率。在一个视口中获得一个宽度和高度，我就得到了一个可以使用的比例，而通过这个比例，我知道在其他视口宽度中的高度应该是多少。用手计算它们需要大量的时间，至少需要大量的带宽，所以这不是一个好答案。
结论
我想知道为什么没有人知道这一点，有些人甚至告诉我，这是不可能修补CSS的。我不喜欢在调整元素时使用JavaScript，所以我不接受JavaScript（并忘记jQuery）的答案而不进行更多挖掘。总而言之，这很好，这是在网站设计中实现纯CSS的一步。
我很抱歉，我的文本中有任何不寻常的惯例，我不是英语母语，而且我对编写Stack Overflow答案也很陌生。
还应该注意的是，我们在一些浏览器中有邪恶的滚动条。例如，当使用Firefox时，我注意到100vw表示视口的全宽，在滚动条下延伸（内容无法扩展。
看看我的代码。它使字体大小变小，以适应任何地方。
但我认为这并不能带来良好的用户体验
var containerWidth = $("#ui-id-2").width();
var items = $(".quickSearchAutocomplete .ui-menu-item");
var fontSize = 16;
items.each(function(){
// Displaying a value depends sometimes on your case. You may make it block or inline-table instead of inline-block or whatever value that make the div take overflow width.
$(this).css({"whiteSpace": "nowrap", "display": "inline-block"});
while ($(this).width() > containerWidth){
console.log("$(this).width()" + $(this).width() + "containerWidth" + containerWidth)
$(this).css("font-size", fontSize -= 0.5);
}
});
在我的一个项目中，我使用vw和vh之间的“混合”来根据我的需要调整字体大小，例如：
font-size: calc(3vw + 3vh);
我知道这不能回答OP的问题，但也许它可以解决其他人的问题。
