为什么用em代替px？

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

当前回答

例子：

代码：body｛font-size:10px；｝//保持10以下所有大小正确，更改此值，其余更改为该值的1.4

1｛font-size:1.2em；｝//12px

2｛font-size:1.4em；｝//14px

3｛font-size:1.6em；｝//16px

4｛font-size:1.8em；｝//18px

5｛字体大小：2em；｝//20px

…

body

通过改变身体中的值，其余部分会自动改变为基础值的一倍…

10×2=2010×1.6=16等

你可以将基值设为8px…所以8×2=168×1.6=12.8//可由浏览器舍入

2014-04-18 05:51:40

其他回答

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

2020-04-09 11:13:30

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

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

2009-03-04 23:35:47

如果您想使用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 */
}

等等

2011-05-11 04:20:05

托马斯鲁特（thomas rutter）的最高分答案是正确的，但关于像素的大小是非常错误的。所以，即使它很旧，我也不能让它被破坏。

电脑屏幕通常不是96dpi！（或者ppi，如果你想迂腐的话。）

像素没有固定的物理大小。（是的，它只固定在一个屏幕上，但在下一个屏幕中，像素很可能更大或更小，当然不是1/96英寸。）证据画一条960像素长的线。用物理尺测量。是10英寸吗？不将你的笔记本电脑连接到电视上。现在线路是10英寸吗？还是没有？在iPhone上显示该行。还是一样大小？为什么不呢？

谁发明了96dpi电脑屏幕神话？（有些宗教使用72dpi的神话。但同样错误。）

2013-06-01 23:09:13

例子：