我听说你应该在样式表中用em而不是像素来定义大小和距离。所以问题是,在CSS中定义样式时,为什么要使用em而不是px?有没有一个很好的例子可以说明这一点?


当前回答

避免使用em或px,而是使用rem,因为它更容易找到计算值。但在em和px之间,px更好,因为em很难调试。

其他回答

如果您想使用px来指定字体大小,但仍然希望em通过将其放在CSS文件中提供可用性,那么有一个简单的解决方案:

body {
  font-size: 62.5%;
}

现在指定p(和其他)标记如下:

p {
  font-size: 0.8em; /* This is equal to 8px */
  font-size: 1.0em; /* This is equal to 10px */
  font-size: 1.2em; /* This is equal to 12px */
  font-size: 2.0em; /* This is equal to 20px */
}

等等

在IE6(从您的网站上)消失之前,您可能希望使用em作为字体大小。当页面缩放(与文本缩放相反)成为标准行为时,Px将正常。

Trainfamer已经提供了必要的链接。

普遍的共识是使用百分比来调整字体大小,因为它在浏览器/平台之间更加一致。

有趣的是,我以前总是使用pt来调整字体大小,我假设所有网站都使用pt。你通常不会在其他应用程序(如Word)中使用像素大小。我想这是因为它们是用于打印的-但在web浏览器中的大小与Word中的大小相同。。。

使用em或百分比的主要原因是允许用户在不破坏设计的情况下更改文本大小。如果您使用以px指定的字体进行设计,则如果用户选择文本大小更大,字体大小不会改变(在IE 6和其他浏览器中)。这对于有视觉障碍的用户来说非常糟糕。

有关此类设计的几个例子和文章(有无数可供选择),请参阅最新一期的“a List Apart:Fluid Grids”,旧一期的文章“How to Size Text in CSS”或Dan Cederholm的防弹Web Design。

您的图像仍然应该以像素大小显示,但通常情况下,用像素大小显示文本被认为是不好的形式。

尽管我个人很鄙视IE6,但它目前是《财富》200强公司中唯一一款被大多数用户认可的浏览器。

像素是绝对单位,而rem/em是相对单位。更多信息:https://drafts.csswg.org/css-values-3/

当您希望字体大小根据系统的字体大小进行调整时,应使用相对单位,因为系统将字体大小值提供给根元素(即HTML元素)。

在这种情况下,如果网页在Google Chrome中打开,HTML元素的字体大小由Chrome设置,请尝试更改它,以查看使用rem/em单位字体的网页的效果。

如果使用px作为字体单位,字体将不会调整大小,而使用rem/em单位的字体将在更改系统字体大小时调整大小。

因此,如果您希望大小固定,请使用px;如果您希望系统大小自适应/动态,请使用rem/em。