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


当前回答

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

其他回答

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

我有一台高分辨率的小型笔记本电脑,必须以120%的文本放大率运行Firefox,才能不斜视地阅读。

许多网站都有这样的问题。布局变成乱码,按钮中的文本被切成两半或完全消失。就连stackoverflow.com也深受其苦:

注意顶部按钮和页面选项卡如何重叠。如果他们使用em单位而不是px,就不会有问题。

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

电脑屏幕通常不是96dpi!(或者ppi,如果你想迂腐的话。)

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

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

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

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

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

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

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

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