基金會6特殊情況下的標題大小

Question

TL; DR

在Foundation 6中爲內置斷點添加不同字體大小的最佳方法是什麼？

隨着基金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總會有類。特別：

$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的位置（如您的EG）：

$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()附加到元素類型以更一般地定位。我總是發現特定方法（上面）比僞選擇器中的稍微分散的應用程序更安全。