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


当前回答

因为他们(http://en.wikipedia.org/wiki/Em_(排版))与当前使用的字体大小成正比。如果字体大小是16点,那么一个em就是16点。如果字体大小为16像素(注意:与点不同),则一个em为16像素。

这导致了两件(相关的)事情:

如果你以后选择在CSS中编辑字体大小,保持比例很容易。许多浏览器支持自定义字体大小,覆盖CSS。如果您以像素为单位设计所有内容,那么在这些情况下,您的布局可能会中断。但是,如果你使用ems,这些过度使用应该可以缓解这些问题。

其他回答

它适用于根据字体大小进行缩放的所有内容。

它在通过缩放字体大小实现缩放的浏览器上特别有用。因此,如果使用em调整所有元素的大小,它们会相应地缩放。

避免使用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已经提供了必要的链接。

使用px精确放置图形元素。使用em进行测量,必须在文本元素周围进行定位和间隔,如行高等。px是像素精度的,em可以随使用的字体动态变化