提问



我很难理解字体缩放。


我目前这个网站的主体font-size为100%。但是100%的是什么?这似乎计算出16px。 [101]


我的印象是100%会以某种方式引用浏览器窗口的大小,但显然不是因为它总是16px,无论窗口是否调整为移动宽度或完整的宽屏桌面。


如何使我的网站上的文本与其容器相关?我尝试使用em,但这并没有扩展。


我的理由是,当你调整大小时我的菜单之类的东西会变得模糊,所以我需要减少.menuItem的px font-size以及与容器宽度相关的其他元素。 (例如,在大型桌面上的菜单中,22px可以很好地工作。向下移动到平板电脑宽度,16px更合适。)


我知道我可以添加断点,但我真的希望文本可以扩展为具有额外的断点,否则我将以每100px宽度减少数百个断点来控制文本。

最佳参考


编辑:如果容器不是正文 CSS技巧涵盖了您的所有选项:https://css-tricks.com/fitting-text-to-a-container/[102]


如果容器是正文,那么您要查找的是视口百分比长度:[103]



  视口百分比长度与初始包含块的大小有关。当初始包含块的高度或宽度改变时,它们相应地缩放。但是,当根元素上的溢出值为auto时,假定任何滚动条都不存在。 [104]



价值观是:



  • vw(视口宽度的百分比)

  • vh(视口高度的百分比)

  • vi(在根元素的内联轴方向上视口大小的1%)

  • vb(在根元素的块轴方向上视口大小的1%)

  • vmin(vwvh中的较小者)

  • vmax(较大或vwvh)



1 v *等于初始包含块的1%。


使用它看起来像这样:


p {
    font-size: 4vw;
}


如您所见,当视口宽度增加时,font-size也会增加,而无需使用媒体查询。


这些值是一个大小单位,就像pxem一样,因此它们也可用于调整其他元素的大小,例如宽度,边距或填充。


浏览器支持非常好,但您可能需要回退,例如:


p {
    font-size: 16px; 
    font-size: 4vw;
}


查看支持统计信息:http://caniuse.com/#feat=viewport-units。 [105]


另外,请查看CSS-Tricks以获得更广泛的外观:http://css-tricks.com/viewport-sized-typography/[106]


这是一篇关于设置最小/最大尺寸并对尺寸进行更多控制的好文章:http://madebymike.com.au/writing/precise-control-responsive-typography/[107]


这里有一篇关于使用calc()设置大小的文章,以便文本填充视口:http://codepen.io/CrocoDillon/pen/fBJxu [108]


另外,请查看这篇文章,该文章使用了一种名为熔化前导的技术来调整线高。 https://css-tricks.com/molten-leading-css/[109]

其它参考1


但是如果容器不是视口(正文)怎么办?



Alex根据接受的答案在评论中提出了这个问题。


这个事实并不意味着vw不能在某种程度上用于该容器的大小。现在要看到任何变化都必须假设容器在某种程度上是灵活的。是通过直接百分比width还是通过100%减去利润率。如果容器总是被设置为,那么这个点就变得没什么了,让我们说200px宽 - 然后只设置一个适用于那个宽度的font-size


示例1


但是,对于灵活的宽度容器,必须意识到容器在某种程度上 仍然在视口 之外。因此,需要根据与视口的百分比大小差异来调整vw设置,这意味着要考虑父包装的大小。 举个例子:[110]


div {
    width: 50%;
    border: 1px solid black;
    margin: 20px;
    font-size: 16px;
    /* 100 = viewport width, as 1vw = 1/100th of that
       So if the container is 50% of viewport (as here)
       then factor that into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
    */
    font-size: 2.5vw; 
}


假设这里divbody的子节点,它50%宽度为50%,这是这个基本情况下的视口大小。基本上,你想设置一个对你来说很好看的vw。正如您在上面的CSS中的评论中所看到的,您可以通过数学方式思考整个视口大小,但是您不需要需要来执行此操作。文本将转到使用容器flex,因为容器在视口大小调整时弯曲。更新:这是两个不同大小容器的示例。[111]


示例2


您可以通过强制基于此计算来帮助确保视口大小调整。 考虑这个例子:[112]


html {width: 100%;} /* force html to be viewport width */
body {width: 150%; } /* overflow the body */

div {
    width: 50%;
    border: 1px solid black;
    margin: 20px;
    font-size: 16px;
    /* 100 = viewport width, as 1vw = 1/100th of that
       Here, the body is 200% of viewport, but the container is 50% 
       of viewport, so both parents factor  into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 3.75vw 
       (5 * 1.5 [i.e. 150%]) * .5 [i.e. 50%]
    */
    font-size: 3.75vw; 
}


大小调整仍然基于视口,但实质上是根据容器大小本身设置的。


应该动态调整容器的大小......



如果容器元素的大小最终通过@media断点或通过javascript动态地改变其百分比关系,则无论基础目标是什么,都需要重新计算以维持文本大小调整的相同关系。


以上面的例子#1为例。如果@media@media或javascript切换为div宽度,那么同时,font-size需要在媒体查询或javascript中进行调整对5vw * .25 = 1.25的新计算。这会使文本大小与原始50%容器的宽度从视口大小减少一半时的大小相同,但现在由于其自身百分比计算的变化而减少了。


挑战


使用CSS3 calc()函数时,动态调整将变得困难,因为此函数目前不适用于font-size目的。因此,如果宽度在calc()上发生变化,则无法进行纯CSS3调整。当然,对边距宽度的微小调整可能不足以保证font-size的任何变化,因此可能无关紧要。[113]

其它参考2


我在我的一个项目中做的是在vw和vh之间的混合,以根据我的需要调整字体大小,例如:


font-size: calc(3vw + 3vh);


我知道这并不能回答op的问题,但也许它可以成为其他任何人的解决方案。

其它参考3


这个问题有一个很大的哲学。
最简单的做法是给身体一个字体大小(我推荐10),然后所有其他元素的字体都在em或rem中。
我会举例说明这些单位。
Em始终与父相关


body{font-size:10px;}
.menu{font-size:2em;} /* that means 2*10px = 20px */
.menu li{font-size:1.5em;} /* that means 1.5*20px = 30px */


Rem始终与身体相关


body{font-size:10px;}
.menu{font-size:2rem;} /* that means 2*10px = 20px */
.menu li{font-size:1.5rem;} /* that means 1.5*10px = 15px */


而且您可以创建一个脚本来修改相对于容器宽度的字体大小。
但这不是我要重新编写的。因为在一个900px宽度的容器中你会有一个p元素,12px字体大小让我们说。并且在你的ideea上将成为300px宽度容器,4px字体大小。必须有一个下限。
另一种解决方案是使用媒体查询,以便您可以设置不同宽度的字体。


但我建议的解决方案是使用一个javascript库来帮助你。到目前为止我发现的fittext.js。[114]

其它参考4


SVG解决方案:


<div style="width: 60px;">  
  <svg width="100%" height="100%" viewBox="0 -200 1000 300"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text font-size="300" fill="black">Text</text>
  </svg>
</div>


https://jsfiddle.net/qc8ht5eb/[115]

其它参考5


更新,因为我投了一票。


这是功能:


document.body.setScaledFont = function(f) {
  var s = this.offsetWidth, fs = s * f;
  this.style.fontSize = fs + '%';
  return this
};


然后将所有文档子元素字体大小转换为ems或%。


然后在代码中添加这样的内容以设置基本字体大小。


document.body.setScaledFont(0.35);
window.onresize = function() {
    document.body.setScaledFont(0.35);
}


http://jsfiddle.net/0tpvccjt/[116]

其它参考6


这可能不是超级实用,但是如果你想让font成为父类的直接函数,而没有任何JS监听/循环(interval)来读取div/page的大小,那么有一种方法可以做到这一点。 I帧。 iframe中的任何内容都会将iframe的大小视为视口的大小。因此,诀窍就是制作一个iframe,其宽度是您希望文本的最大宽度,其高度等于特定文本的宽高比的最大高度*。


抛开视口单元不能与文本的侧面父单元一起出现的限制(如同,%大小的行为与其他人一样),视口单元确实提供了一个非常强大的工具:能够获得最小/最大维度你不能在其他任何地方做到这一点 - 你不能说..这个div的高度是父亲的宽度*。


话虽这么说,诀窍是使用vmin,并设置iframe大小,以便当高度是限制尺寸时,[[fraction]] *总高度是一个好的字体大小,当宽度是时,[[fraction]] *总宽度限制尺寸。这就是为什么高度必须是宽度和纵横比的乘积。


对于我的具体例子,你有


.main iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: calc(3.5 * 100%);
  background: rgba(0,0,0,0);
  border-style: none;
  transform: translate3d(-50%,-50%,0);
}


使用此方法的小麻烦是您必须手动设置iframe的CSS。如果附加整个CSS文件,则会占用许多文本区域的大量带宽。所以,我所做的是直接从我的CSS附加我想要的规则。


var rule = document.styleSheets[1].rules[4];
var iDoc = document.querySelector('iframe').contentDocument;
iDoc.styleSheets[0].insertRule(rule.cssText); 


您可以编写小函数来获取可能影响文本区域的CSS规则/所有CSS规则。


没有一些骑自行车/听取JS的话,我想不出另一种方法。真正的解决方案是浏览器提供一种方法来缩放文本作为父容器的函数,并提供相同的vmin/vmax类型功能。


JS小提琴:
https://jsfiddle.net/0jr7rrgm/3/
(单击一次将红色方块锁定到鼠标,再次单击以释放)[117]


小提琴中的大部分JS都只是我的自定义点击拖动功能

其它参考7


具有calc(),CSS单位和数学

的纯CSS解决方案

这正是OP所要求的,但可能会成为某人的一天。这个答案并非易于使用,而且需要在开发人员端进行一些研究。


我最后使用不同单位的calc()来获得纯CSS解决方案。您需要对公式进行一些基本的数学理解才能计算出calc()的表达式。


当我解决这个问题时,我必须获得一个整页宽度响应标头,并在DOM中填充一些父。我会在这里使用我的价值观,用你自己的价值取而代之。


数学



你会需要:



  • 在一些视口中调整好的比例,我使用320px,因此我得到了24px高和224px宽,因此比率为9.333 ...或28/3

  • 容器宽度,我padding: 3em和全宽,所以这100wv - 2 * 3em



X是容器的宽度,因此请使用您自己的表达式替换它,或者调整值以获取整页文本。 R是你将拥有的比率。您可以通过调整某些视口中的值,检查元素宽度和高度并使用您自己的值替换它们来获取它。而且,它是width / heigth;)


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,所以我不接受JS甚至jQuery的答案而不需要更多。总而言之,这一点很好,这是网站设计中纯CSS实现的一步。


我为我的文本中的任何不寻常的惯例道歉,我不是英语母语,也不是写SO答案的新手。


修改:还应注意我们在某些浏览器中有邪恶的滚动条。例如,当使用Firefox时,我注意到100vw表示视口的整个宽度,在滚动条下扩展(内容无法展开!),因此必须仔细地对全宽文本进行边距限制,并且最好通过许多浏览器和设备进行测试。

其它参考8


有一种方法可以在没有javascript的情况下执行此操作!


你可以使用内联svg。如果它是内联的,你可以在svg上使用css。您必须记住,使用此方法意味着您的svg将响应其容器大小。


尝试使用以下解决方案......


HTML


<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360.96 358.98" >
      <text>SAVE $500</text>

  </svg>

</div>


CSS


div {
  width: 50%; /* set your container width */
  height: 50%; /* Set your container height */

}

svg {
  width: 100%;
  height: auto;

}

text {
  transform: translate(40px, 202px);
  font-size: 62px;
  fill: #000;

}


例:
https://jsfiddle.net/k8L4xLLa/32/[118]


想要更华丽的东西吗?


SVG还允许你做形状和垃圾的酷东西。查看这个可扩展文本的大用例...


https://jsfiddle.net/k8L4xLLa/14/[119]

其它参考9


100%是相对于基本字体大小的,如果你没有设置它将是浏览器的用户代理默认值。


为了获得效果,我将使用一段javascript来调整相对于窗口尺寸的基本字体大小。

其它参考10


在你的CSS内部尝试在底部添加这个,在设计开始破坏的地方改变320px宽度:


    @media only screen and (max-width: 320px) {

       body { font-size: 1em; }

    }


然后根据需要在px或em中给出font-size。

其它参考11


你试过http://simplefocus.com/flowtype/吗?[120]


这就是我用于我的网站,并且工作得很好。希望能帮助到你。

其它参考12


你在找这样的东西吗? =>结果
http://jsfiddle.net/sijav/dGsC9/4/结果
http://fiddle.jshell.net/sijav/dGsC9/4/show/结果
我使用了flowtype并且工作得很好(不过它是js而不是纯css解决方案)[121] [122] [123]


$('body').flowtype({
 minFont : 10,
 maxFont : 40,
 minimum : 500,
 maximum : 1200,
 fontRatio : 70
});

其它参考13


我自己的解决方案,基于jQuery,通过逐渐增加字体大小,直到容器的高度大幅增加(意味着它有一个换行符)。
它非常简单,但工作得相当好,而且非常容易使用。你不必知道任何关于使用的字体,浏览器会处理所有内容。


你可以在http://jsfiddle.net/tubededentifrice/u5y15d0L/2/[124]上玩它


魔术发生在这里:


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 (ie 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;
};

其它参考14


此Web组件更改字体大小,以使内部文本宽度与容器宽度匹配。查看演示。[125] [126]


你可以像这样使用它:


<full-width-text>Lorem Ipsum</full-width-text>

其它参考15


使用vwem&合。确实很有效,但是我总是需要一个人的触摸来进行微调。


这是我刚刚根据@ tnt-rox编写的一个脚本的答案,试图自动化人类的触摸:




$('#controller').click(function(){
	$('h2').each(function(){
    var
      $el = $(this),
      max = $el.get(0),
      el = null
    ;
    max =
      max
    ? max.offsetWidth
    : 320
    ;
    $el.css({
      'font-size': '1em',
      'display': 'inline',
    });
    el = $el.get(0);

    el.get_float = function(){
      var
        fs = 0
      ;
      if (this.style && this.style.fontSize) {
        fs = parseFloat(this.style.fontSize.replace( /([\d\.]+)em/g, '$1' ));
      }
      return fs;
    };

    el.bigger = function(){
      this.style.fontSize = (this.get_float() +0.1) +'em';
    };


    while ( el.offsetWidth < max ) {
      el.bigger();
    }
    // finishing touch.
    $el.css({
      'font-size': ((el.get_float() -0.1) +'em'),
      'line-height': 'normal',
      'display': '',
    });
	});  // end of ( each )
});	// end of ( font scaling test )

div {
  width: 50%;
  background-color: tomato;
  font-family: 'Arial';
}

h2 {
  white-space: nowrap;
}

h2:nth-child(2) {
  font-style: italic;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="button" id="controller" value="Apply" />
<div>
  <h2>Lorem ipsum dolor</h2>
  <h2>Test String</h2>
  <h2>Sweet Concatenation</h2>
  <h2>Font Scaling</h2>
</div>



我的问题很相似,但与标题中的缩放文本有关。我尝试了Fit Font,但是我需要切换压缩器来获得任何结果,因为它解决了一个稍微不同的问题,就像Text Flow一样。所以我编写了自己的小插件,减少字体大小以适应容器,假设你有overflow: hiddenwhite-space: 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);

其它参考16


我已经使用css转换而不是font-size准备了简单的缩放功能。你可以在任何容器内使用它,你不必设置媒体查询等:)


博客文章:
https://blog.polarbits.co/2017/03/07/full-width-css-js-scalable-header/[128]


代码:


function scaleHeader() {
  var scalable = document.querySelectorAll('.scale--js');
  var margin = 10;
  for (var i = 0; i < scalable.length; i++) {
    var scalableContainer = scalable[i].parentNode;
    scalable[i].style.transform = 'scale(1)';
    var scalableContainerWidth = scalableContainer.offsetWidth - margin;
    var scalableWidth = scalable[i].offsetWidth;
    scalable[i].style.transform = 'scale(' + scalableContainerWidth / scalableWidth + ')';
    scalableContainer.style.height = scalable[i].getBoundingClientRect().height + 'px';
  }
}


工作演示:
https://codepen.io/maciejkorsan/pen/BWLryj[129]

其它参考17


看看我的代码它font size smallerfit无论那里


但我认为这不会带来良好的用户体验


var containerWidth = $("#ui-id-2").width();
var items = $(".quickSearchAutocomplete .ui-menu-item");
var fontSize = 16;

items.each(function(){
    //display value depend 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);
    }
});


[130]


希望这能帮助你

其它参考18


始终使用此属性元素:


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


要么


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


当您全屏显示时,您应该已经计算了比例变量(比例> 1或比例= 1)。然后,全屏:


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


它与很少的代码很好地协同工作。

其它参考19


作为JavaScript后备(或您唯一的解决方案),您可以使用我的jQuery Scalem插件,它允许您通过传递reference选项来相对于父元素(容器)进行缩放。[131]

其它参考20


如果它对任何人都有帮助,那么这个帖子中的大多数解决方案都是将文本包装成多行,形成e。


但后来我发现了这个,它起作用了:


https://github.com/chunksnbits/jquery-quickfit[132]


用法示例:


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

其它参考21


尝试使用fitText插件,因为Viewport大小不是这个问题的解决方案。
只需添加库[133]


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="jquery.fittext.js"></script>


并通过设置文本系数更改font-size以进行更正:


$("#text_div").fitText(0.8);


您可以设置文本的最大值和最小值:


$("#text_div").fitText(0.8, { minFontSize: '12px', maxFontSize: '36px' });

其它参考22


对于动态文本,这个插件非常有用http://freqdec.github.io/slabText/。
只需添加css [134]


.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();

其它参考23


为了使font-size适合它的容器,而不是窗口,请参阅我在这个问题中共享的resizeFont()函数(其他答案的组合,其中大部分已在此处链接)。它使用window.addEventListener('resize', resizeFont);触发。


Vanilla JS:调整字体大小以适应容器


JS:



function resizeFont() {
  var elements  = document.getElementsByClassName('resize');
  console.log(elements);
  if (elements.length < 0) {
    return;
  }
  _len = elements.length;
  for (_i = 0; _i < _len; _i++) {
    var el = elements[_i];
    el.style.fontSize = "100%";
    for (var size = 100; el.scrollHeight > el.clientHeight; size -= 10) {
      el.style.fontSize = size + '%';
    }
  }
}


您也许可以使用vw/vh作为后备,因此您可以使用javascript动态分配emrem单位,确保在禁用javascript时字体会缩放到窗口。


.resize类应用于包含要缩放的文本的所有元素。


在添加window resize事件侦听器之前触发该函数。然后,任何不适合其容器的文本将在页面加载时以及调整大小时缩小。


注意:默认font-size必须设置为emrem%才能获得正确的结果...如果元素的样式太复杂,那么如果您开始疯狂地调整窗口大小,浏览器可能会崩溃。

其它参考24


这对我有用:


我尝试根据设置font-size:10px得到的宽度/高度来估算字体大小。基本上这个想法是如果我有20px宽度和11px高度,字体大小:10px,那么最大字体大小是什么,数学容量为50px宽度和30px高度?


答案是双比例系统:


{20:10=50:X,11:10=30:Y}={X =(10 * 50)/20,Y =(10 * 30)/11}


现在X是一个匹配宽度的字体大小,Y是一个匹配高度的字体大小;取最小的价值


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 js does
    //if real measure had been 12.49 px => js 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元素或小于它的父元素,否则如果子元素和父元素具有相同的宽度/高度函数将失败

其它参考25


我没有看到任何关于CSS flex属性的答案,但它也非常有用。

其它参考26


如果问题是在宽屏桌面上字体变得太大,我认为最简单的css方法就是这样(假设包装器最大1000px宽)


.specialText{
    font-size:2.4vw;
}

@media only screen and (min-width: 1000px) {
    .specialText {
        width:24px;
    }
}


因此,对于小于容器最大宽度的任何屏幕,它都是自动调整尺寸的,并且当屏幕更宽时(例如几乎所有台式机/笔记本电脑)都固定尺寸