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结构，您还可以使用last-of-type之类的nth-child()或$files = array('file_name_1', 'file_name_2'...); foreach($files as $file){ if(file_exists($file)){ echo "screenshots"; break; } }附加到元素类型来更一般地定位。我总是发现特殊方法（上面）比伪选择器的轻微分散枪应用更安全。

基础6的特殊情况标题尺寸

1 个答案: