断点和“字体大小”参数答案

【问题标题】：Breakpoints and the 'font-size' parameter断点和“字体大小”参数
【发布时间】：2012-09-21 13:00:12
【问题描述】：

有没有人有过在断点混入中使用“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' 参数的用途有误解，因为字体大小在任何大小下都保持在 12 像素。

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

【问题讨论】：

【解决方案1】：

似乎该功能没有很好的文档记录。它不是设置字体大小，而是修复基于 em 的媒体查询。如果您使用12px 的基本字体大小，这非常重要。

浏览器总是根据默认浏览器字体大小 (16px) 来解释基于 em 的媒体查询。这根本没有任何意义，但他们就是这样做的。所以，为了让你在 50em (*12px) 处下断点，我们必须将断点设置在 37.5em (*16px，浏览器默认)。传递您的基本字体大小允许我们进行调整。

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

【讨论】：