在 CSS 中设置字体大小时，我应该使用百分比值 ( %) 还是em? 你能解释一下优点吗？
Matthias
问问题
49068 次
8 回答
80
A List Apart上有一篇关于网页排版的非常好的文章。
他们的结论：
以 em 为单位调整文本大小和行高，并在正文中指定百分比（以及 Safari 2 的一个可选警告），可在当今常用的所有浏览器中提供准确、可调整大小的文本。这是一种您可以放入工具包中的技术，并将其用作在 CSS 中调整文本大小的最佳实践，以满足设计人员和读者的需求。
于 2008-09-25T11:22:14.383 回答
15
来自http://archivist.incutio.com/viewlist/css-discuss/1408
%：一些浏览器不处理字体大小的百分比，而是将 150% 解释为 150px。（例如，一些 NN4 版本。）IE 也有嵌套元素百分比的问题。似乎 IE 使用相对于视口而不是相对于父元素的百分比。还有一个问题（尽管根据 W3C 规范是正确的），在 Moz/Ns6 中，您不能使用相对于没有指定高度/宽度的元素的百分比。
em：有时浏览器使用错误的参考尺寸，但在相对单位中，它是问题最少的一个。你可能会发现它有时被解释为 px。
pt：分辨率差别很大，不宜用于显示。不过，它对于打印使用来说是相当安全的。
px：屏幕上唯一可靠的绝对单位。但是，它可能在打印中被错误地解释，因为一个点通常由几个像素组成，因此一切都变得非常小。
于 2008-09-25T11:20:13.903 回答
13
两者都相对于它的大小调整字体大小。1.5em 与 150% 相同。唯一的优势似乎是可读性，选择你最喜欢的。
于 2008-09-25T11:21:14.353 回答
11
当您不将其用于字体大小时，真正的区别就很明显了。设置 a paddingof1em与 不同100%。em总是相对于字体大小。但%可能与字体大小、宽度、高度以及我不知道的其他一些事情有关。
于 2018-07-18T14:00:37.063 回答
6
鉴于（几乎？）所有的浏览器现在都调整了整个页面的大小，而不仅仅是文本，之前的pxvs. %vs. ems 在可访问字体大小方面的问题相当没有实际意义。
所以，答案是这可能无关紧要。使用任何对你有用的东西。
%很好，因为它允许相对调整大小。
px很好，因为在使用它时管理期望相当容易。
em当也用于布局元素时可能很有用，因为它可以允许与文本大小相关的比例大小。
于 2009-11-12T16:22:23.833 回答
0
正如 Galwegian 所提到的，px 是最可靠的网页排版，因为您在页面上所做的所有其他事情都主要参考计算机显示器进行布局。绝对尺寸的问题是某些浏览器 (IE) 不会缩放网页上的像素值元素，因此当您尝试放大/缩小时，除了这些元素之外的所有内容都会进行调整。
我不知道 IE8 是否正确处理了这个问题，但是所有其他浏览器供应商都可以很好地处理像素，并且用户需要放大/缩小文本仍然是少数情况（SO 上的这个文本框可能是例外）。如果你想变得很脏，你总是可以添加一个 javascript 函数来增大你的文本大小，并为用户提供一个“小”/“大”按钮。
于 2008-09-25T11:23:54.003 回答
0
关于 css 单位%和em.
据我了解（至少在理论上/概念上，但可能不是这两个单元如何在浏览器中实现）这两个单元是等价的，即如果你将你的em值乘以100然后em用%它替换应该是同一件事吗？
如果 em 和 % 之间确实存在一些真正的区别，那么有人可以解释它（或提供解释的链接）吗？
（我想将我的这条评论添加到它所属的位置，即在答案下方缩进，"Liam, answered Sep 25 '08 at 11:21"因为我也想知道为什么他的答案被否决了，但我不知道如何把我的评论放在那里，因此不得不写这个“线程全局”回复）
于 2012-12-12T12:52:20.780 回答
-1
雅虎用户界面库 ( http://developer.yahoo.com/yui/ ) 有一组很好的基本 css 类，用于“重置”浏览器特定设置，以便显示网站的基础对所有人都是相同的（支持）浏览器。
使用 YUI 时，应该使用百分比。
于 2008-09-25T12:04:25.920 回答