为什么是 em 而不是 px？

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

说一个比另一个更好的选择是错误的（或者两者都不会在规范中给出自己的目的）。甚至值得注意的是 Stack Overflow 广泛使用 px 单位。这是not这个问题表明这是一个糟糕的选择。

单位的定义

• px是绝对测量单位（例如in, pt, or cm）这也恰好是 1/96in单位（稍后详细说明原因）。因为它是绝对测量，所以当您想要将某些内容定义为特定大小时，可以随时使用它，而不是与浏览器窗口大小或字体大小等其他内容成比例。

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

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

  所有绝对测量值都彼此严格相关；那是，1in is always 96px， 就像1in is always 72pt。 （注意1in实际上几乎从来都不是物理的inch当谈论基于屏幕的媒体时）。所有绝对测量均假定标称屏幕分辨率为 96ppi 以及桌面显示器的标称观看距离，并且在这样的屏幕上px将等于一physical屏幕上的像素和一个in将等于 96 个物理像素。在像素密度或观看距离显着不同的屏幕上，或者如果用户使用浏览器的缩放功能缩放页面，px将不再必然与物理像素相关。

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

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

• rem就好像em，但它是相对于文档（特别是根元素）的基本字体大小，而不是相对于当前元素的字体大小。

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

  Using %设计中的单位允许您的设计适应屏幕/设备的宽度，而使用绝对单位，例如px才不是。

• vh, vw, vmin, and vmax是相对单位，例如%，但它们是相对于viewport（窗口可视区域的大小）而不是父元素的大小。它们分别与视口的高度、宽度、两者中的较小者和两者中的较大者相关。