断点和'font-size‘参数

Question

有没有人有使用'font-size‘参数和断点混入的经验？

在文档中，它陈述了以下内容...

    <$font-size>: When using EMs for your grid, the font size is important. Default: $base-font-size

在我正在使用的一个设计中，我采用了移动优先的方法，因此$base-font-size = 12px。

然后，我在50em处添加一个断点(本例中的任意值)，如下所示……

    @include at-breakpoint(50em 12, 16px) {
      .container{
        @include container;
      }
    }

我不确定我是否正确理解了这一点，但我预计，如果我已经为“font - size”指定了一个值，一旦屏幕超过50em，我的字体大小就会增加到16px。

然而，我想我可能弄错了这个' font - size‘参数的用途，因为字体大小在任何大小下都保持在12px。

有人知道这个参数会有什么影响吗？

Answer 1

这个特性似乎没有很好的文档记录。它不是用来设置字体大小的，而是用来修复基于em的媒体查询的。如果你使用的是12px的基本字号，这一点非常重要。

浏览器总是相对于默认的浏览器字体大小(16px)插入基于em的媒体查询。这没有任何意义，但他们就是这么做的。因此，为了让您在50em (*12px)处设置断点，我们必须将断点设置为37.5em (*16px，浏览器默认设置)。通过传递你的基本字体大小，我们就可以进行调整。

应该更好地记录这一点，并且应该更好地命名参数。我已经创建了一个issue on GitHub。