CSS em 与 px（舍入误差）

Question

我一直在开发一个个人网站（所以，时间在这里不是问题），我制作了一个基本样式表，在其中处理所有字体大小、边框宽度、行高等。 我一直努力使用 ems，但是当我在其他浏览器（例如 Chromium）上测试该网站时，内容与我的“像素完美”网格不匹配。

所以，我的问题是，我应该使用 px 吗？我的意思是，我知道 ems 是“必经之路”，但现在大多数浏览器都实现了全页缩放（它们不只调整文本大小），并且在处理边框宽度和行高时，px 更舒服，因为我可以完全避免子像素舍入。

您对此有何看法？ （顺便说一句，支持 IE 不是我的目标之一；我对此一点也不关心）

Answer 1

内容与我的“像素完美”网格不匹配。

如果您使用像素完美的网格，请使用像素值。 em 是一个相对值，仅当布局能够适应不同的内容大小时才有效。

Answer 2

我只会将 em 用于大小取决于字体大小的元素。

边框（及其宽度）等元素通常不依赖于字体大小。

Answer 3

当使用 em 作为边距和填充时，我发现相对测量可以做一些有趣的事情。

em 可以在嵌套元素中累积，您会发现自己将一些值向后推以与外部元素对齐。

这看起来很好，直到您非常缓慢地缩小浏览器窗口并发现有时嵌套元素的值舍入为与外部父元素不同的像素。

为了解决这个问题，我在父级别使用了 rem 来设置字体大小，并发现这允许父级和子级使用相同的基本相对值。