使用ems替代CSS中的%有哪些优点?

14

我理解使用 ems 相比静态测量单位像是 像素 的优势,但为什么大多数CSS开发者(除了 SO)更喜欢使用 ems 而不是百分比值呢?

4个回答

13

关于字体大小:

  • em 和 % 都是相对于父元素的字体大小(例如 2em 和 200% 总是给出相同的结果)
  • em 在排版中有其历史渊源(尽管 CSS 中的 em 不同于排版中的 em)
  • 与 em 相比,浏览器对于 % 的 CSS 实现错误更少

对于其他所有东西(例如一个元素的宽度):

  • em 是相对于字体大小的
  • % 是相对于父元素的

……所以它们执行完全不同的功能,需要根据具体情况来考虑。


1
“使用百分比的 CSS 浏览器实现比使用 em 更少出现错误” — 真的吗?你有关于浏览器 bug 的例子吗? - Paul D. Waite
有没有“基础字体大小”的定义?是在<body>标签上指定的大小吗?我一直以为em和%完全相同,只是不同的单位... - DisgruntledGoat
2
@Paul - 最大的可能是Internet Explorer(我无法立即说出版本),其中,使用ems指定字体大小时,使用视图菜单更改字体大小会比预期的要调整得多(因此,“小”变成了“微小”,而“大”变成了“巨大”)。 - Quentin
1
@Alix - 不是的。设置字体大小时,两个单位都是指父元素的字体大小。在设置其他内容时,em 是指该元素的字体大小。 - Quentin
2
从规范上来说:'em'单位等于其所处元素的'font-size'属性的计算值。例外情况是当'em'出现在'font-size'属性的值中时,此时它将引用父元素的字体大小。 - Quentin
显示剩余7条评论

2

相对单位em是基于已知且一致的值(即字体大小),而百分比则基于容器的大小。当你的尺寸和大小基于上下文环境(即你所在的元素/容器)而改变时,设计和理解CSS就会更加困难。


谢谢Nate,你和@David提供的答案还让我有点困惑,如果你能再多解释一些这个主题,我会非常感激。 - Alix Axel

1
我想其中一个原因是许多网页设计师最初都是平面设计师,因此习惯于使用 em 作为度量单位。这对我来说肯定是这样的。

-1

创建一个页面,采用25%/50%/25%的3列布局,使用支持6行文章(16%字体大小)的字体,并且每页显示5篇文章(高度为20%)

现在想象一下在分辨率为320x200像素的嵌入式设备上的情况


抱歉,我不明白... =S - Alix Axel
这并没有太多意义。那种类型的设备通常不会呈现屏幕媒体样式表(除非它具有虚拟视口和缩放功能,例如iPhone上的Safari)。以百分比定义的字体大小是相对于父元素的字体大小而言的,而不是视口或容器的框尺寸。 - Quentin
抱歉,但我曾经遇到过完全无法在Netbook上使用的网页,仅仅因为作者假设“每个人都使用大屏幕”,而页面要么不能适应屏幕而禁用滚动,要么缩小到难以阅读的尺寸。 - SF.
我不知道他们制造分辨率如此低的上网本(我的上网本非常早期)。虽然选择单位并不能像魔法一样治愈或毁灭设计适应各种视口大小的问题,但关键在于所选单位的应用。 - Quentin
320x200,可能不是。640x480,是的,很多页面都会对您的屏幕尺寸做出错误的假设。当然,没有理由禁止“%”甚至“px”,但是一个严格使用“%”而不考虑合理的最小尺寸的布局是失败的。 - SF.

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接