Foundation 6 的特殊标题尺寸

Question

TL;DR

相对于 Foundation 6 下的内置断点，添加不同字体大小的最佳方法是什么？

使用 Foundation 6，我可以调整 _settings.scss 下每个断点的六个标题的映射：

$header-styles: (
  small: (
    'h1': ('font-size': 39),
    'h2': ('font-size': 28),
    'h3': ('font-size': 22),
    'h4': ('font-size': 19),
    'h5': ('font-size': 16),
    'h6': ('font-size': 15),
  ),
  medium: (
    'h1': ('font-size': 39),
    'h2': ('font-size': 28),
    'h3': ('font-size': 22),
    'h4': ('font-size': 19),
    'h5': ('font-size': 16),
    'h6': ('font-size': 15),
  ),
);

这对于顶级标题是可以的，但是当我在结构标记中的页面上有多个 h1 时，我希望其他子部分中的 h1 具有不同的字体大小。例如。 19px 而不是上面看到的 39px。

<header>
  <h1>This is 39px by default. Cool.</h1>
</header>
<article>
  <h1>This should be smaller size in appearance e.g. 19px</h1>
  <p>Both h1's should follow and scale to the breakpoints small, medium, etc.<p>
</article>

编辑：

我了解到我可以在列表中添加一个类名并且它可以工作，但这似乎是一种不正确的做法，它假定辅助 h1 将始终具有类 .special：

$header-styles: (
  small: (
    'h1': ('font-size': 39),
    'h2': ('font-size': 28),
    'h3': ('font-size': 22),
    'h4': ('font-size': 19),
    'h5': ('font-size': 16),
    'h6': ('font-size': 15),
    '.special': ('font-size': 100),
  ),
  medium: (
    'h1': ('font-size': 39),
    'h2': ('font-size': 28),
    'h3': ('font-size': 22),
    'h4': ('font-size': 19),
    'h5': ('font-size': 16),
    'h6': ('font-size': 15),
    '.special': ('font-size': 200),
  ),
);

Answer 1

如果您可以在 HTML 中指定位置（例如在您的示例中）：

$header-styles: (
  small: (
    'h1': ('font-size': 39),
    'article > h1': ('font-size': 100), // target only h1 that are direct children of an article
    'h2': ('font-size': 28),
    'h3': ('font-size': 22),
    'h4': ('font-size': 19),
    'h5': ('font-size': 16),
    'h6': ('font-size': 15),
  ),
  medium: (
    'h1': ('font-size': 39),,
    'article > h1': ('font-size': 200), // target only h1 that are direct children of an article
    'h2': ('font-size': 28),
    'h3': ('font-size': 22),
    'h4': ('font-size': 19),
    'h5': ('font-size': 16),
    'h6': ('font-size': 15),
  ),
);

根据您的 HTML 结构，您可能还可以使用 pseudo selectors，如 last-of-type 或 nth-child() 附加到元素类型以更广泛地定位。我一直发现特异性方法（上图）比伪选择器中的稍微分散的应用程序更安全。