2

有没有人有过在断点混合中使用“字体大小”参数的经验？

在文档中，它说明了以下内容...

    <$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。

但是，我认为我可能对这个“字体大小”参数的用途有误解，因为字体大小在任何大小下都保持在 12 像素。

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

4

1 回答 1

0

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

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

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

于 2012-09-21T15:23:56.603 回答