2

使用以下 CSS：

* {
    margin: 0;
    padding: 0;
    font-family:"Segoe UI";
    font-variant: small-caps;
}
.red {
    color: hsl(0, 100%, 50%);
    font-size: 3em;
}
.orange {
    color: hsl(30, 100%, 50%);
    font-size: 3em;
}
.yellow {
    color: hsl(60, 100%, 50%);
    font-size: 3em;
}
.green {
    color: hsl(120, 100%, 50%);
    font-size: 3em;
}
.blue {
    color: hsl(210, 100%, 50%);
    font-size: 3em;
}
.indigo {
    color: hsl(230, 100%, 50%);
    font-size: 3em;
}
.violet {
    color: hsl(274, 100%, 50%);
    font-size: 3em;
}

... * 选择器中的属性工作正常 - 它们适用于所有类；但是，如果我将 font-size 移动到那里，文本就会变成暴龙的比例。您可以通过将字体大小从单个类移动到 * 类在这里看到这一点：http: //jsfiddle.net/NvTvr/8/

为什么会这样？

更新

所以这是要走的路，然后：

* {
    margin: 0;
    padding: 0;
    font-family:"Segoe UI";
    font-variant: small-caps;
    font-size: 48px;
}
.red {
    color: hsl(0, 100%, 50%);
}

...ETC。（在颜色类中没有指定字体大小）；如http://jsfiddle.net/NvTvr/10/中所见

4

4 回答 4

4

因为em是相对于上下文的。

由于font-size是从上下文继承的，每个后代元素em font-size都会将当前元素乘以font-size包含文本内容的元素。

让我们在实践中看看，假设：

* { font-size: 3em }

您正在将其（相对于上下文）font-size应用于所有元素。

这意味着，该html元素将具有默认浏览器字体大小的 3 倍。将body具有其容器 ( html) 的 3 倍字体大小，对应于默认字体大小的 9 倍。对于每个元素的祖先，依此类推。

有一个新单元没有这个问题，rem它是相对于根的。但这没有得到广泛支持（没有 IE<=8 支持）。

在答案的这一部分中，对于emx pxx辩论有点偏离主题。rem

引用这个答案：

em当您特别希望某物的大小取决于当前字体大小时使用。

现代浏览器可以px很好地缩放单位。em主要在旧 IE 占主导地位并且在缩放时没有缩放px字体大小时使用。

不过，em它是否用于网页设计。比如说，在制作 CSS 图标时，应该相对于文本的字体大小进行缩放。但是对于整体布局，我使用rem/px不会产生复杂的问题和头痛，或者在进行流畅的布局时不会产生百分比。

for font-size的问题px在于，如果您需要更改页面文本的整体大小，则必须更改font-size使用px. 这就是rem援助的地方。

总是有一个关于使用哪个单位的激烈讨论font-size。选择一种可以减少您的项目头痛和足够的方法。

所以总而言之，这取决于个人喜好和项目要求。

参考：

定义和解释

更多讨论

于 2013-05-31T23:07:23.890 回答
1

这是因为当您使用"*" 选择器时，您也将 font-size:3em 应用于 ".red",".green" 等的父级（在本例中为 body ）；em 是一个复合单元，因此通过声明字体大小的方式，您将 font-size:3em 应用于正文（48px 假设浏览器默认为 16px），然后将 font-size:3em 应用于您的类，这意味着字体大小将为 144px。

希望我的解释是有道理的。

于 2013-05-31T23:30:40.520 回答
1

em单位在属性值中使用时，font-size表示父元素的字体大小。所以声明* { font-size: 3em }使得每个元素的字体大小是其父元素字体大小的三倍。

如果要使用浏览器默认字体大小的三倍（可以是任何字体大小），那么最简单的方法是为其他元素声明body { font-size: 3em }而不声明font-size。

于 2013-06-01T07:48:11.450 回答
0

感谢 Jukka 的明确和暗示* 建议，CSS 现在是：

* {
    margin: 0;
    padding: 0;
    /*font-family: Consolas;*/
    /*font-family: Candara;/*
    /*font-family: Calibri;*/
    font-family:"Segoe UI";
    font-variant: small-caps;
}
body { font-size: 3em }
.red { color: hsl(0, 100%, 50%); }
.orange { color: hsl(30, 100%, 50%); }
.yellow { color: hsl(60, 100%, 50%); }
.green { color: hsl(120, 100%, 50%); }
.blue { color: hsl(210, 100%, 50%); }
.indigo { color: hsl(230, 100%, 50%); }
.violet { color: hsl(274, 100%, 50%); }

更新 jsfiddle 是http://jsfiddle.net/NvTvr/11/

  • 虽然，如果您在 jsfiddle 中选择 TidyUp，它会垂直扩展一行类和元素声明（如果只设置一个属性，我喜欢将它们全部放在一行上的想法）。
于 2013-06-01T13:18:58.343 回答