我很难理解字体缩放。

我目前有一个字体大小为100%的网站。但这是100%的吗?这似乎是在16个像素处计算出来的。

我的印象是,100%会以某种方式指代浏览器窗口的大小,但显然不是因为无论窗口大小调整为移动宽度还是宽屏桌面,都是16像素。

如何使站点上的文本与其容器相关?我尝试过使用它们,但这也无法扩展。

我的理由是,当你调整大小时,像我的菜单这样的东西会变得压扁,所以我需要减少.menuItem等元素相对于容器宽度的px字体大小。(例如,在大型桌面上的菜单中,22px的效果非常好。向下移动到平板电脑宽度,16px更合适。)

我知道我可以添加断点,但我真的希望文本能够缩放并具有额外的断点,否则,我将以每100像素宽度减少数百个断点来控制文本。


当前回答

这个问题有一个大的哲学。

最简单的方法是给body指定一个特定的字体大小(我建议10),然后所有其他元素的字体都是em或rem。我会给你一个例子来理解这些单位。Em始终相对于其父级:

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 */

Rem始终相对于身体:

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 */

然后,您可以创建一个脚本,该脚本将根据容器宽度修改字体大小。但这不是我要推荐的。例如,在一个900像素宽的容器中,你会有一个字体大小为12像素的p元素。根据你的想法,它将变成一个300像素宽的容器,字体大小为4像素。必须有一个下限。

其他解决方案是媒体查询,这样您就可以为不同的宽度设置字体。

但我推荐的解决方案是使用一个JavaScript库来帮助您实现这一点。还有到目前为止我找到的fitext.js。

其他回答

此web组件更改字体大小,使内部文本宽度与容器宽度匹配。查看演示。

您可以这样使用:

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

功能如下:

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

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

然后向代码中添加类似的内容以设置基本字体大小。

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

http://jsfiddle.net/0tpvccjt/

我准备了一个简单的缩放函数,使用CSS转换而不是字体大小。您可以在任何容器中使用它,不必设置媒体查询等:)

博客文章:全宽CSS和JS可扩展标头

代码:

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

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

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

我的问题类似,但与标题内的文本缩放有关。我尝试了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);