基于容器大小的字体缩放

<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' });

我知道我可以添加断点，但我真的希望文字能够缩放，而且还有额外的断点，否则...

1. 自定义属性
2. 媒体查询用于断点
3. clamp()(2022年2月浏览器支持率高达93%)
4. calc()

:root {
  --scaling-factor: 1
}

.parent {
  font-size: 30px
}

.largest {
  font-size: clamp(60%, calc(var(--scaling-factor) * 100%), 100%); 
}

.middle {
  font-size: clamp(60%, calc(var(--scaling-factor) * 85%), 100%); 
}

.smallest {
  font-size: clamp(60%, calc(var(--scaling-factor) * 70%), 100%); 
}

然后，您可以像这样嵌套您的媒体查询（或根据需要使用您的断点）：

@media (max-width: 1200px) {
  :root {
    --scaling-factor: 0.9
  }
  @media (max-width: 800px) {
    :root {
      --scaling-factor: 0.8
    }
    @media (max-width: 600px) {
      :root {
        --scaling-factor: 0.5 /* nope, because the font-size is floored at 60% thanks to clamp() */
      }
    }
  }
}

这样可以减少你的媒体查询标记。

优点

1. 一个自定义属性控制所有缩放，无需在每个媒体断点上添加多个声明。
2. 使用clamp()设置了font-size应该是多少，从而确保您的文本永远不会太小（这里的底部是父元素font-size的60%）。

请查看此JSFiddle以获取演示。调整窗口大小直到最小宽度时，段落的font-size都相同。

function getMaxFontSizeApprox(el){
    var fontSize = 10;
    var p = el.parentNode;

    var parent_h = p.offsetHeight ? p.offsetHeight : p.style.pixelHeight;
    if(!parent_h)
        parent_h = 0;

    var parent_w = p.offsetHeight ? p.offsetWidth : p.style.pixelWidth;
    if(!parent_w)
        parent_w = 0;

    el.style.fontSize = fontSize + "px";

    var el_h = el.offsetHeight ? el.offsetHeight : el.style.pixelHeight;
    if(!el_h)
        el_h = 0;

    var el_w = el.offsetHeight ? el.offsetWidth : el.style.pixelWidth;
    if(!el_w)
        el_w = 0;

    // 0.5 is the error on the measure that JavaScript does
    // if the real measure had been 12.49 px => JavaScript would have said 12px
    // so we think about the worst case when could have, we add 0.5 to 
    // compensate the round error
    var fs1 = (fontSize*(parent_w + 0.5))/(el_w + 0.5);
    var fs2 = (fontSize*(parent_h) + 0.5)/(el_h + 0.5);

    fontSize = Math.floor(Math.min(fs1,fs2));
    el.style.fontSize = fontSize + "px";
    return fontSize;
}

注意：该函数的参数必须是一个 span 元素或者比其父元素小的元素，否则如果子元素和父元素都具有相同的宽度/高度，函数将会失败。

始终在此属性中包含您的元素:

JavaScript: element.style.fontSize = "100%";

或者

CSS: style = "font-size: 100%;"

当您进入全屏模式时，应该已经计算出一个比例变量（比例>1或比例=1）。 然后，在全屏模式下：

document.body.style.fontSize = (scale * 100) + "%";

请看一下我的代码。它使得字体大小变小以适应所在位置。

但是我认为这样做不会对用户产生好的体验。

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);
    }
});

如果有帮助的话，本主题中大部分解决方案都是将文本换行成多行，例如：

但是我找到了这个方法，它起作用了：

https://github.com/chunksnbits/jquery-quickfit

使用示例：

$('.someText').quickfit({max:50,tolerance:.4})

使用纯CSS在一定程度上是可能的。

.auto-sized-text {
    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'>Here is a resizing text</text></svg>");
    
    background-color: rgba(0,0,0,0.06);
    animation: grow 2s infinite alternate both;
}

@keyframes grow {
  from { width: 100px; }
  to { width: 300px; }
}

<div class="auto-sized-text">
</div>

说明

content rule设置元素的内容，可以是图像的URL，包括SVG图像。 SVG图像可以包含文本，因此您可以获得带有文本的背景图像，其大小根据其父级的大小调整。 您还可以使用background-image属性，但与content不同，它不会影响元素的布局，因此您需要定义父级的大小。

这种方法的问题在于，您需要定义SVG内部文本的颜色、大小和位置。 它们不会从父级继承。 但是您可以使用Sass和Less进行巧妙处理。 这种解决方案也可能存在可访问性问题。

我不建议在所有地方都使用它。 但在某些情况下应该非常有用。