将所有CSS测量值转换为EM

Question

关于将排版转换为EM单位的积极因素有很多信息，但是将所有内容转换为ems是一种很好的做法，其中包括：填充，边距。身高等？

Answer 1

我认为重要的是要记住ems实际上是什么：相对于其父容器的字体大小。当您希望在相对于父级字体大小的某些内容上保持一致的填充或边距时使用ems会很有用（因此填充将根据字体缩放）。

但有时像素，有效值或百分比更有意义。例如，在ems中定义1像素边界没有多大意义（但可能）。或100％宽度，这在ems中几乎是不可能的。

同样是ems级联，所以在某些情况下，rems可以更有用。长话短说：这取决于。他们并不适合每一个人，使用你认为最合适的东西。

Answer 2

Ems通常仅用于类型和媒体查询断点。 （我经历了为ems中的所有内容做所有大小调整的阶段，现在看到这个阶段是学习曲线上的一个奇怪的打嗝。）

但请注意，可能存在填充，例如，填充也应该在ems中。例如我经常使用：

p {padding: 0 0 1em 0}

在段落之后生成空格，但这又有意义，因为它的字体大小合适。

使用ems进行响应式设计的便利之处在于，您可以在字体大小的整个网站范围内轻松地级联所有与您认为类型相关并且在ems中调整大小的元素，例如：移动第一：

@media (min-width: 37.5em{ {
    body {font-size: 1.1em;
    }
}

@media (min-width: 75em{ {
    body {font-size: 1.2em;
    }
}

虽然级联行为有时令人抓狂，但在深度嵌套的上下文中调试很困难。你必须学会​​期待它。我的感觉是，这种模式在生产力，时间和CSS声明总数方面实现了净节省。根据视口宽度单独调整元素大小可能更容易出错。