0

我正在做一个旧项目，它在所有方面都使用 em，从字体大小到布局（宽度、边距、填充等），这让我想知道使用 em 来布局页面和字体是否真的有任何好处?

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

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

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

来自CSS 2.1 规范：

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

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

4

3 回答 3

4

正如您所指出的，CSS-Pixels 不再是真正的像素，主要浏览器可以正确处理这些。

所以使用 em 的唯一用例是如果你真的想要一些相对于字体高度的东西。

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

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

于 2012-10-22T13:01:34.603 回答
0

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

于 2012-10-22T12:57:08.380 回答
0

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

于 2012-10-22T13:01:36.450 回答