为什么是他们而不是PX？

Question

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

Answer 1

说一种比另一种更好的选择是错误的(否则两者都不会在规范中被赋予自己的目的)。甚至值得注意的是，StackOverflow广泛使用PX单元。这并不是斯波克被告知的糟糕的选择。

单位的定义

• PX是度量的绝对单位(如在……里面, PT，或厘米)也恰好是1/96在……里面单元(稍后将详细介绍原因)。因为它是一个绝对的度量，所以可以在任何时候使用它来定义某个特定的大小，而不是与浏览器窗口的大小或字体大小成比例。

  就像所有其他绝对单位一样，PX单元不按浏览器窗口的宽度进行缩放。因此，如果整个页面设计使用绝对单位，如PX而不是%，它无法适应浏览器的宽度。这并不是天生的好或坏，只是设计师需要在坚持一个确切的尺寸和不灵活的与拉伸之间的选择，但在过程中不坚持一个确切的大小。这将是典型的网站有固定大小和灵活大小的混合对象。

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

  所有绝对测量都是严格相关的，也就是说，1英寸是总 96 px，就像1英寸是总 72pt..(请注意，1英寸几乎从来都不是生理上的寸当谈论到基于屏幕的媒体时)。所有绝对测量都假定标称屏幕分辨率为96皮，台式机显示器的标称观看距离，以及在这种屏幕显示器上的标称观看距离。PX等于一物理屏幕上的像素和一个像素在……里面将等于96个物理像素。在像素密度或观看距离有显著差异的屏幕上，或者如果用户使用浏览器的缩放功能放大页面，PX不再必然与物理像素相关。

• 埃姆不是绝对单位-它是相对于目前选择的字体大小的单位。除非您已通过使用绝对单位设置字体大小来重写字体样式(如PX或PT)，这将受到用户浏览器或操作系统中字体选择的影响，如果用户已经制作了字体，那么使用em作为一般长度单位是没有意义的，除非您特别希望它作为字体大小缩放。

  使用埃姆当您特别希望某物的大小取决于当前的字体大小时。

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

  使用%设计中的单元允许您的设计适应屏幕/设备的宽度，而使用绝对单元(如PX不会的。

Answer 2

我有一台高分辨率的小型笔记本电脑，必须在120%的文本中运行Firefox，这样才能阅读而不斜视。

许多网站都有这方面的问题。布局变得乱七八糟，文字按钮被切成两半或完全消失。甚至stackoverflow网站也受到了影响：

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