我很难理解字体缩放。
我目前有一个字体大小为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>
其他回答
100%是相对于基本字体大小的，如果您没有设置它，它将是浏览器的用户代理默认值。
为了获得您想要的效果，我将使用一段JavaScript代码来相对于窗口尺寸调整基本字体大小。
使用CSS变量
还没有人提到CSS变量，这种方法对我来说效果最好，所以：
假设你的页面上有一个列，它是移动用户屏幕宽度的100%，但最大宽度为800px，所以在桌面上，列的两边都有一些空间。将此置于页面顶部：
<script> document.documentElement.style.setProperty('--column-width', Math.min(window.innerWidth, 800)+'px'); </script>
现在您可以使用该变量（而不是内置的vw单元）来设置字体的大小。例如。
p {
font-size: calc( var(--column-width) / 100 );
}
这不是一种纯CSS方法，但它非常接近。
看看我的代码。它使字体大小变小，以适应任何地方。
但我认为这并不能带来良好的用户体验
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);
}
});
在CSS内部，尝试在底部添加此项，更改320像素的宽度，以适应设计开始中断的位置：
@media only screen and (max-width: 320px) {
body { font-size: 1em; }
}
然后根据需要以“px”或“em”表示字体大小。
我的问题类似，但与标题内的文本缩放有关。我尝试了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);
