em单位的相关性？

Question

我正在做一个旧项目，该项目广泛使用 em 来处理所有内容，从字体大小到布局（宽度、边距、填充等），这让我想知道使用 em 来布局页面是否真的有任何好处还有字体？

我什至不使用 em 作为字体，我发现它们有点令人困惑，尤其是没有 body { font-size: 62.5%; } 技巧 (which apparently is bad)。据我所知，现在每个浏览器都可以正确调整 px 大小。

我不知道使用 em 对于移动设备的好处是否有任何好处，据我所知，这个元标记应该让移动浏览器以标准尺寸显示像素

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

来自CSS 2.1 spec：

参考像素是像素密度为 96dpi 且距离阅读器一臂远的设备上一个像素的视角。对于 28 英寸的标称臂长，因此视角约为 0.0213 度。对于在手臂长度上阅读，1px 因此对应于大约 0.26 毫米（1/96 英寸）。

我想我真正想问的问题是，在调整布局和/或字体大小时，em 是否比 px 提供任何好处（除了 em 允许您创建现场字体调整大小功能的事实）？还是 em 与 px 更多只是一种偏好？

Answer 1

正如您所指出的，CSS 像素不再是真正的像素，主流浏览器都能正确处理这些问题。

因此，使用 em 的唯一用例是，如果您真的希望某些东西与字体高度相关。

例如你想要一个 textarea 默认为“3 行高”，你可以给它 height: 3em; 因此，即使在项目后期更改字体大小或其他任何内容后，此文本区域仍将是“3 行高”。

如果您不希望您的定义实际上与字体高度相关，请不要使用 em。

Answer 2

我知道的唯一好处是，如果用户觉得文本太小，他们可以在网页上调整 em 的大小。如果您以像素为单位指定，则用户无法更改字体大小。这是我所知道的唯一好处。但这仅适用于较旧的浏览器。现代浏览器可以调整任何文本的大小。就个人而言，我从不使用 em，只使用像素。

Answer 3

问题在于您假设您知道像素是什么以及它的大小。屏幕像素密度差异很大（有些手机的像素比桌面屏幕多！），因此像素不是物理测量值，不应该用于它。已定义 em 以提供可移植的通用物理尺寸，因此如果我在 1em 处创建角色，它将在每个设备上大致相同的物理尺寸，这通常是我们想要做的（而不是挤压整个网络页面以不可读的尺寸放到移动屏幕上）。因此 em 是布局页面的首选方式。