5

当使用 EM 单位而不是 PX 单位指定字体大小时，我无法编写可维护的 CSS 代码。我已经习惯了这样写 CSS 代码：

body {font-size: 12px;}
body .sidebar {font-size:11px;}
body .sidebar .loadmore {font-size:10px;}
body .sidebar .warning {font-size:13px;}

这个想法是，在整个网站的许多页面上，有很多文本应该有 12 像素的字体大小。我利用特殊性规则来覆盖站点特殊区域中的 12px 字体大小。

假设我将上面的代码重写为：

body {font-size: 12em;}
body .sidebar {font-size:11em;}
body .sidebar .loadmore {font-size:10em;}
body .sidebar .warning {font-size:13em;}

如果我将上面代码中的 px 替换为 em，我的理解是我失去了特异性规则的优势。代码的第 3 行将被解释为“10 em of 11 em of 12 em”，这与“覆盖所有先前的规则并使用 10 em of （默认值是什么？）”的含义完全不同。我说的对吗？

编辑如果我所说的是正确的，那么如何编写字体大小规则，例如“对所有元素使用字体大小 X，但在侧边栏上使用字体大小 Y”？

4

3 回答 3

6

约翰，您所谈论的特殊性将以您所说的方式发生。关于为什么可以看到的参考：http: //kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/。

编辑作为对您的编辑的回复，请考虑 jnylen 在您原始帖子的评论中发布的内容。

您为 body {font-size: 12em;} 列出的 12 em 字体大小将默认字体大小缩放为当前大小的 12 倍。如果您想使用 em，您需要考虑您希望使用它们的比例并进行数学计算。如果要使用嵌套语句设置固定大小，则需要坚持固定属性（像素）。正如我链接的文章中所述，em 的优点是您可以设置默认大小，例如 12 px，然后使用 em 来缩放它们。例如在基于移动的网站中。

于 2012-04-03T21:58:16.297 回答
2

是的，em当它们适用的元素嵌套时，值“相乘”在一起。这不一定是特异性问题 - 如果您单独指定规则.loadmore并且.sidebar您会看到相同的问题，因为.sidebarcontains .loadmore。

这是使用此方法的示例：http: //jsfiddle.net/PJWrW/

我通常使用任何一个px或百分比单位来表示字体大小，以明确表示我正在设置绝对字体大小或修改父字体大小。

我有时使用em单位来定义尺寸，如填充和宽度，因为em单位基本上是当前字体大小的字母宽度。

于 2012-04-03T21:57:46.147 回答
0

据我所知，如果您使用 em 作为字体大小，那么在设置某些元素的特定大小的同时，没有一种方法可以为左侧栏中（或其他地方）中的元素设置标准字体大小在那个边栏中。如果您使用 em，则必须指定该侧栏中所有元素的大小。

就我个人而言，我通常使用 px 来调整字体大小，只是因为您可以为某些元素设置标准字体大小，正如您在帖子中所说的那样。

我听到的关于在 px 上使用 em 的唯一令人信服的论点是关于缩放问题，这不再是一个真正的问题（如果您使用 px，IE6 不允许您手动更改字体大小，但大多数人不久前就停止使用 IE6）我认为使用 em 作为优势的唯一真实情况是，如果您想实现用户可以通过 JavaScript 更改字体大小的功能，就像这里

于 2012-04-03T22:40:26.647 回答