在CSS中设置字体大小时,我应该使用百分比值(%
)还是em
?你能解释一下这个优势吗?
答案 0 :(得分:79)
在A List Apart上有关于网页排版的非常好的文章。
他们的结论:
在ems中调整文本和行高, 在指定的百分比 身体(和一个可选的警告 Safari 2),显示提供 所有的准确,可调整大小的文本 今天常用的浏览器。这是 您可以放入套件中的技术 袋子和用作最佳实践 在CSS中调整满足两者的文本大小 设计师和读者。
答案 1 :(得分:13)
来自http://archivist.incutio.com/viewlist/css-discuss/1408
%:某些浏览器无法处理 font-size的百分比,但解释 150%为150px。 (一些NN4版本, 例如。)IE也有问题 嵌套元素的百分比。它 似乎IE使用百分比相对于 视口而不是相对于 父元素。还有一个问题 (尽管根据W3C是正确的 规格),在Moz / Ns6中,你不能使用 相对于没有的元素的百分比 指定的高度/宽度。
em:有时浏览器使用错误 参考大小,但相对的 单位是最少的 问题。你可能会发现它 有时虽然被解释为px。
pt:两者之间差异很大 决议,不应该使用 用于显示。这是非常安全的 打印使用虽然。
px:唯一可靠的绝对单位 屏幕。这可能是错误的 但是,作为一个解释 点通常由几个组成 像素,因此一切都变成了 可笑的小。
答案 2 :(得分:7)
两者都相对于它的大小来调整字体大小。 1.5em与150%相同。唯一的优势似乎是可读性,选择最适合的人。
答案 3 :(得分:5)
鉴于(差不多?)所有浏览器现在整体调整页面大小,而不仅仅是文本,以px
与%
与em
的先前问题为准可访问的字体大小调整是没有实际意义的。
所以,答案是它可能没关系。使用适合你的任何东西。
%
很不错,因为它允许相对调整大小。
px
很不错,因为使用它时管理期望相当容易。
em
在用于布局元素时也很有用,因为它可以允许与文本大小相关的比例大小调整。
答案 4 :(得分:4)
当您不将其用于字体大小时,真正的区别显而易见。将padding
中的1em
设置为与100%
相同。 em
始终与字体大小有关。但是%
可能与字体大小,宽度,高度以及其他一些我不知道的东西有关。
答案 5 :(得分:0)
关于css单位%
和em
之间的差异。
据我所知(至少在理论上/概念上,但可能不是这两个单元如何在浏览器中实现)这两个单位是等价的,即如果你将em
值乘以{{1}然后用100
替换em
它应该是一回事吗?
如果em和%之间确实存在一些真正的区别,那么有人可以解释它(或提供解释的链接)吗?
(我想在我的评论中添加它的所有评论,即在%
的答案下方缩进,因为我也想知道为什么他的答案被低估了,但我无法弄清楚如何放我在那里的评论,因此不得不写这个“线程全球”回复)
答案 6 :(得分:-1)
正如Galwegian所提到的,px对于网页排版来说是最可靠的,因为你在网页上做的其他事情大部分都是针对计算机显示器进行布局的。绝对大小的问题是某些浏览器(IE)不会缩放网页上的像素值元素,因此当您尝试缩放进/出时,一切都在调整,除了那些元素。
我不知道IE8是否能正确处理这个问题,但所有其他浏览器供应商处理的像素都很好,而且仍然是用户需要放大/缩小文本的少数情况(SO上的这个文本框可能是例外)。如果你想变得非常脏,你总是可以添加一个javascript函数来增加你的文字大小,并为用户提供一个“小”/“更大”的按钮。
答案 7 :(得分:-1)
Yahoo User Interface library ( http://developer.yahoo.com/yui/)有一组很好的基本css类,用于“重置”浏览器特定设置,以便所有(支持)浏览器显示网站的基础相同。
使用YUI时,应该使用百分比。