Css 基于容器宽度的字体缩放

我很难理解字体缩放

我目前有一个网站的正文

字体大小
为100%。100%是什么？这似乎是16像素的计算结果

我当时的印象是，100%都是指浏览器窗口的大小，但显然不是因为无论是将窗口调整到移动宽度还是全屏幕桌面，都是16像素

如何使网站上的文本相对于其容器进行缩放？我试着使用
em
，但这也无法扩展

我的理由是，当你调整大小时，我的菜单之类的东西会被压扁，因此我需要减少
.menuItem
的
px
字体大小，以及与容器宽度相关的其他元素。（例如，在大型桌面上的菜单中，
22px
工作正常。向下移动到平板电脑宽度，则更适合使用
16px
。）

我知道我可以添加断点，但我真的希望文本能够缩放并具有额外的断点，否则，我将在宽度每减少100像素时得到数百个断点来控制文本。
100%与基本字体大小有关，如果您没有设置，这将是浏览器的用户代理默认值

为了获得您想要的效果，我将使用一段JavaScript代码来调整相对于窗口尺寸的基本字体大小。
在CSS中，尝试在底部添加此项，更改设计开始破坏的地方的320像素宽度：

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

        body { font-size: 1em; }

    }

然后根据需要以“px”或“em”表示字体大小。
编辑：如果容器不是主体，CSS技巧将覆盖所有选项

如果容器是主体，则您要查找的是：

视口百分比长度与视口的大小相关。当初始包含块的高度或宽度更改时，它们将相应地缩放。但是，当根元素上的溢出值为“自动”时，假定不存在任何滚动条

这些数值是：


vw
（%视口宽度）
vh
（%视口高度）
vi
（根元素内联轴方向上视口大小的1%）
vb
（根元素块轴方向上视口大小的1%）
vmin
（vw
或vh

中的较小者）

vmax

（较大的或

vw

或

vh

）

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

使用它看起来像这样：

p {
    font-size: 4vw;
}

如您所见，当视口宽度增加时，

字体大小也会增加，而无需使用媒体查询

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

浏览器支持相当不错，但您可能需要一个后备方案，例如：

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

请查看支持统计信息：

此外，请查看CSS技巧以获得更广泛的了解：

下面是一篇关于设置最小/最大尺寸以及对尺寸进行更多控制的好文章：

下面是一篇关于使用calc（）设置大小的文章，以便文本填充视口：

另外，请看这篇文章，这篇文章使用了一种被称为“熔融引导”的技术来调整线条高度
 但是，如果容器不是视口（实体），该怎么办？
亚历克斯在评论中提出了这个问题

这一事实并不意味着
vw
在某种程度上不能用于该容器的大小。现在要看到任何变化，我们必须假设容器在某种程度上是灵活的。无论是通过直接百分比
宽度
还是通过100%减去边距。如果容器总是设置为，比如说，
200px
wide，那么这一点就变得“没有意义”——然后只需设置一个适用于该宽度的
font size

示例1

但是，使用灵活的宽度容器时，必须意识到，在某种程度上，容器的大小仍然与视口的大小不一致。因此，需要根据视口的百分比大小差异调整
vw
设置，这意味着要考虑父包装的大小：

假设这里的
div
是
主体的子对象
，它是
100%
宽度的
50%
，这是在这种基本情况下的视口大小。基本上，您希望设置一个对您来说很好的
vw
。正如您在上面CSS内容中的我的评论中所看到的，您可以从数学上考虑整个视口的大小，但您不需要这样做。文本将与容器一起“伸缩”，因为容器随着视口大小的调整而伸缩。更新：

示例2

您可以通过基于以下内容强制计算来帮助确保视口大小：

大小仍然基于视口，但本质上是基于容器大小本身设置的

如果容器的大小动态变化。。。
如果容器元素的大小最终通过
@media
断点或JavaScript动态地改变了其百分比关系，那么无论基本“目标”是什么，都需要重新计算以保持文本大小的相同“关系”

以上述第1条为例。如果
@media
或JavaScript将
div
切换为
25%
宽度，则同时需要在media查询中或通过JavaScript将
字体大小调整为
5vw*.25=1.25
。这将使文本大小与h相同
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;
}

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 150% 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;
}

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

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

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

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

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

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

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

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

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

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

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)

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

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

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

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

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

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

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 + '%';
    }
  }
}

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

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

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

<script> document.documentElement.style.setProperty('--column-width', Math.min(window.innerWidth, 800)+'px'); </script>

p {
  font-size: calc( var(--column-width) / 100 );
}

<div style="height:100px; width:200px;">
  <div id='qwe'>
    test
  </div>
</div>

var fontSize, maxHeight, maxWidth, textElement, parentElement;
textElement = document.getElementById('qwe');
parentElement = textElement.parentElement;    
maxHeight = parentElement.clientHeight;
maxWidth = parentElement.clientWidth;
fontSize = maxHeight;
var minFS = 3, maxFS = fontSize;
while (fontSize != minFS) {
  textElement.style.fontSize = `${fontSize}px`;
  if (textElement.offsetHeight < maxHeight && textElement.offsetWidth <= maxWidth) {
    minFS = fontSize;
  } else{
    maxFS = fontSize;
  }
  fontSize = Math.floor((minFS + maxFS)/2);
}
textElement.style.fontSize = `${minFS}px`;