0

我正在设置一个页面，其中文本的大小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等）。数字越大，字号越小。问题是它们不会像网站的其他部分一样被放入树中——它们将是独立的元素。

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

谢谢！

4

2 回答 2

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/

于 2013-11-06T15:59:27.430 回答
0

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

如果您想要一个层次结构，其中每个标题级别的字体大小是更高级别字体大小的 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结果相同。）

但是，一般不需要这样的几何级数。标题的设计是排版，而不是数学。如果使用大小变化，它应该取决于几个因素，例如粗体、斜体和其他印刷设备的使用。

于 2013-11-06T17:09:08.203 回答