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


当前回答

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

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

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

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

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

其他回答

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

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

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

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

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

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

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

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

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

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

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

说一个比另一个更好是错误的(或者两个都不会在规范中被赋予自己的目的)。甚至值得注意的是,Stack Overflow大量使用了像素单位。问题表明,这并不是一个糟糕的选择。

单位的定义

px是一个绝对测量单位(如in、pt或cm),恰好也是in单位的1/96(稍后将详细说明原因)。因为它是一个绝对度量,所以可以在任何时候使用它来定义某个特定的大小,而不是与浏览器窗口的大小或字体大小等其他大小成比例。与所有其他绝对单位一样,像素单位不会根据浏览器窗口的宽度进行缩放。因此,如果您的整个页面设计使用像素等绝对单位,而不是%,它将无法适应浏览器的宽度。这并不是天生的好或坏,只是设计师需要在坚持精确尺寸和不灵活与拉伸之间做出选择,但在这个过程中不坚持精确尺寸。对于一个站点来说,固定大小和灵活大小的对象是典型的混合。固定大小的元素通常需要包含在页面中,例如广告横幅、徽标或图标。这确保了在设计中几乎总是需要至少一些基于像素的测量。例如,图像(默认情况下)将被缩放,使得每个像素的大小为1px,因此如果您围绕图像进行设计,则需要px单位。它对于精确的字体大小和边框宽度也非常有用,由于舍入,在大多数屏幕上使用像素单位是最有意义的。所有绝对测量值都彼此严格相关;也就是说,1英寸总是96像素,就像1英寸总是72像素一样。(请注意,在谈论基于屏幕的媒体时,1英寸几乎从来都不是实际的英寸)。所有绝对测量值都假定标称屏幕分辨率为96ppi,桌面显示器的标称观看距离,在这样的屏幕上,1像素将等于屏幕上的一个物理像素,1英寸将等于96个物理像素。在像素密度或观看距离显著不同的屏幕上,或者如果用户使用浏览器的缩放功能缩放页面,像素将不再一定与物理像素相关。em不是绝对单位-它是相对于当前所选字体大小的单位。除非您通过使用绝对单位(如px或pt)设置字体大小来覆盖字体样式,否则这将受到用户浏览器或操作系统中字体选择的影响(如果用户选择了字体),因此使用em作为一般长度单位是没有意义的,除非您特别希望它随着字体大小的缩放而缩放。当您特别希望某个内容的大小取决于当前字体大小时,请使用em。rem与em类似,但它与文档的基本字体大小(特别是根元素)有关,而不是当前元素的字体大小。%在本例中,也是相对于父元素的高度或宽度的相对单位。如果您的设计不依赖特定的像素大小来设置其大小,那么对于设计的总宽度之类的事情,它们是像素单位的一个很好的选择。在您的设计中使用%单位可以使您的设计适应屏幕/设备的宽度,而使用绝对单位(如px)则不行。vh、vw、vmin和vmax是类似于%的相对单位,但它们与视口的大小(窗口可视区域的大小)而不是父元素的大小有关。它们分别与视口的高度和宽度相关,两者中较小者和较大者。