1

在 CSS 中，我可以让它在特定的 div 类中，每个标题都缩小下一个尺寸吗？意思是，h1 是 h2 大小的，h2 是 h3 大小的，等等？但没有实际指定这些尺寸？

我希望能够设置一次 h1、h2、h3，然后在特定情况下将它们全部向下移动。

4

2 回答 2

2

通过 HTML5 CR（参见 4.4.11标题和部分s），您可以使用articleorsection元素来达到此目的，因为它们开始新的嵌套级别，因此例如h1它们内部对应于h2它们外部。最新版本的浏览器通常会实现这一点，例如，您可以通过查看以下内容：

<!doctype html>
<title>Headings</title>
<h1>Heading</h1>
<h2>Heading</h2>
<article>
<h1>Heading</h1>
</article>
<section>
<h1>Heading</h1>
</section>

但是，支持仍然有限，并且会在很长一段时间内如此。IE 8（及以上）将是我们多年。尽管在这些浏览器上存在 polyfills 来实现新的 HTML5 元素，例如著名的html5shiv.js不处理标题。

所以最强大的方法是明确设置你的字体大小。但是，您可以使用上下文选择器，例如

<style>
h2, .article h1 { font-size: 130%; }
</style>
...
<div class=article>
<h1>...</h1>
...
</div>

（或者可能使用article带有 html5shiv 的元素）。

于 2013-02-17T08:25:14.027 回答
1

Jukka 的答案是一种方式，但如果您响应式地解决问题，我会以另一种方式解决这个问题，这种方式可能会更强大。

这是 Smashing Magazine 上的一篇文章，关于为复制构建适当的基线，如果您正在构建复制繁重的界面，这是一本很好的读物。

因此，您将首先为文本设置适当的基线，然后根据基线使用百分比来缩放标题大小。

注意：这些是示例值。我没有测试任何东西。

body { font-size: 1.2em } /* Baseline */

article { font-size: 80% } /* 0.8 of ^ Baseline */
aside { font-size: 60% } /* 0.6 of ^ Baseline */

/* x% of the parent font-size */
h1 { font-size:160% }
h2 { font-size:140% }
p{ font-size:100% }
etc...

这将影响, &中的所有副本，并且文本大小将相对于基线大小进行缩放。bodyarticleaside

例子：

<h1>Font size = 1.2em * 160% = 1.92em</h1>
<p>Font size = 1.2em * 100% = 1.2em</p>

<article>
    <h1>Font size = 1.2em * 80% * 160% = 1.536em</h1>
    <p>Font size = 1.2em * 80% * 100% = 0.96em</p>
</article>

<aside>
    <h1>Font size = 1.2em * 60% * 160% = 1.152em</h1>
    <p>Font size = 1.2em * 60% * 100% = 0.72em</p>
</aside>

这使得为​​不同的查询设置不同的基线变得容易@media，并且所有的文本大小都正确。

进一步的例子：

我们使用媒体查询更改基线：

/* Small screen, so beef up the font size */
@media only screen and (max-width: 320px){
    body { font-size:1.4em }
}

这将影响我们之前的所有样式，如下所示：

<h1>Font size = 1.4em * 160% = 2.24em</h1>
<p>Font size = 1.4em * 100% = 1.4em</p>

<article>
    <h1>Font size = 1.4em * 80% * 160% = 1.792em</h1>
    <p>Font size = 1.4em * 80% * 100% = 1.12em</p>
</article>

<aside>
    <h1>Font size = 1.4em * 60% * 160% = 1.344em</h1>
    <p>Font size = 1.4em * 60% * 100% = 0.84em</p>
</aside>

2c

于 2013-02-17T08:40:42.253 回答