css - 为什么是 em 而不是 px？

Question

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

Answer 1

说一个是比另一个更好的选择是错误的(或者两者都不会在规范中给出自己的目的)。甚至可能值得注意的是，StackOverflow 广泛使用了 px 单位。这并不是 Spoike 被告知的糟糕选择。

单位定义

像素 是绝对测量单位(如 in、pt 或 cm)，也恰好是 in 单位的 1/96(稍后会详细说明原因)。因为它是一个绝对度量，所以任何时候您都可以使用它来定义特定大小的内容，而不是与浏览器窗口的大小或字体大小等其他内容成比例。

与所有其他绝对单位一样，px 单位不会根据浏览器窗口的宽度进行缩放。因此，如果您的整个页面设计使用绝对单位，例如 px 而不是 %，它将无法适应浏览器的宽度。这本身没有好坏之分，只是设计师需要在坚持精确尺寸和不灵活与拉伸(stretch)但在此过程中不坚持精确尺寸之间做出的选择。一个站点通常混合有固定大小和灵活大小的对象。

固定大小的元素通常需要合并到页面中 - 例如广告横幅、 Logo 或图标。这确保您几乎总是需要在设计中至少进行一些基于 px 的测量。例如，图像将(默认情况下)缩放为每个像素的大小为 1*px*，因此如果您围绕图像进行设计，则需要 px 单位。它对于精确的字体大小和边框宽度也非常有用，由于四舍五入，在大多数屏幕上使用 px 单位是最有意义的。

所有绝对测量值彼此严格相关；也就是说，1in 总是 96px，就像 1in 总是 72pt。 (请注意，在谈论基于屏幕的媒体时，1in 实际上几乎从来都不是物理英寸)。所有绝对测量都假设标称屏幕分辨率为 96ppi，并且桌面显示器的标称观看距离，在这样的屏幕上，一像素将等于屏幕上的一个物理像素，一英寸将等于 96 个物理像素。在像素密度或观看距离明显不同的屏幕上，或者如果用户使用浏览器的缩放功能缩放页面，px 将不再一定与物理像素相关。

em 不是绝对单位 - 它是相对于当前选择的字体大小的单位。除非您通过使用绝对单位(例如 px 或 pt)设置字体大小来覆盖字体样式，否则这将受到用户浏览器或操作系统中字体选择的影响(如果他们已经制作了字体)，因此没有意义使用 em 作为一般长度单位，除非您特别希望它随着字体大小的缩放而缩放。

当您特别希望某些内容的大小取决于当前字体大小时，请使用 em。

% 也是一个相对单位，在这种情况下，相对于父元素的高度或宽度。如果您的设计不依赖于特定的像素大小来设置其大小，它们是 px 单位的一个很好的替代品，例如设计的总宽度。

在您的设计中使用 % 单位可以让您的设计适应屏幕/设备的宽度，而使用 px 等绝对单位则不然。