Question

我正在设置一个页面，其中文本的大小为em，相对于单个父级。这允许我在一个地方更改字体大小并影响整个站点。以下是它如何工作的示例。

HTML：

<div class="parent">
    Some Text
    <div class="child">
        Some Text
        <div class="child">
            Some Text
        </div>
    </div>
</div>

CSS：

.parent { font-size: 30px; }
.child { font-size: .8em; }

所以我理解它的方式是第一级将是30px的大小。每个子级别相对于父级别为0.8。所以层次结构应该是这样的：30, 24, 19, 15, 12, 10。当我测试这个时，就是这样。

这正是我想要设置标题的方式（h1，h2等）。数字越大，字体越小。问题是它们不会像网站的其他部分一样被放入树中 - 它们将是独立的元素。

所以我的问题：在vanilla CSS中是否有任何方法可以使元素字体大小相对于另一个元素？如果没有，是否有任何框架可以执行此功能？

谢谢！

Answer 1

如何调整每个标题类型的em大小？

<div class="parent">
    <h1>h1 example</h1>
    <h2>h2 example</h2>
    <h3>h3 example</h3>
</div>

.parent { font-size: 30px; }
    h1 { font-size: .8em; }
    h2 { font-size: .6em; }
    h3 { font-size: .4em; }

这是一个jsfiddle：http://jsfiddle.net/ry9YX/

您可能希望根据在以下工具中找到的转化来设置显式大小调整：http://pxtoem.com/

Answer 2

您只能使元素的字体大小相对于父元素的字体大小或相对于根元素的字体大小。因此，没有办法根据问题中描述的嵌套来确定元素的大小，因为标题不能是另一个标题的后代。

如果您想要一个层次结构，其中每个标题级别的字体大小是较高级别字体大小的80％，您只需计算产品80％×80％，80％×80％×80这将意味着类似下面的场景，假设为了简单起见，顶级标题应该具有与复制文本相同的字体大小（这几乎不是一个好主意，而是概念参考点）：

.parent h1 { font-size: 100% } 
.parent h2 { font-size: 80% }
.parent h3 { font-size: 64% }
.parent h4 { font-size: 51.2% }
.parent h5 { font-size: 40.92% }
.parent h6 { font-size: 32.16% }

（而不是80%等，您当然可以使用0.8em，但结果相同。）

然而，通常不需要这样的几何级数。标题的设计是排版，而不是数学。如果使用尺寸变化，则应取决于几个因素，例如：使用粗体，斜体和其他印刷设备。

Em动态扩展标头

2 个答案: