从 Ems 中取出“Erm..”

em 仍然是在 web 上调整文本大小的最佳单位。您依赖像素的原因只有一个，那就是您还没有掌握 em 的窍门。让我们改变它！

尺寸就是一切

当我们建立网站时，我们需要告诉浏览器有多大的东西：“这个标题好大”，“这个容器真高”，“这个表单比那个宽”，这就是我们布局页面的方式。像素作为所选择的测量单位总是非常有意义的。我们正在输出到屏幕，那么我们还能使用什么？！

然而，像素并不是特别灵活。事实证明，僵化不利于网络。

像素问题

Oliver Reichenstein 很久以前就说过：“ Web 是 95% 的排版”，但设计师仍然忽略了这个想法。内容和用户；作为网页设计师，它们是我们的优先事项，排版设计帮助我们满足这些优先事项。

由于简单的页面缩放，用户可以以他们喜欢的任何大小查看任何网站，完美地按比例放大和缩小内容。但这会缩放所有内容，包括布局和 UI 元素。

“不过，大多数浏览器的一个鲜为人知的功能是可以调整您喜欢的字体大小。此功能独立于页面缩放功能运行。” —凯瑟琳·麦克马洪

浏览器以默认大小显示正文。在桌面上，这通常是 16px，移动浏览器会有所不同。正如 Kathleen 所说，用户可以根据自己的喜好更改此默认设置。在这样做时，他们改变了文本的大小，而且只改变了文本。

但是，当网页设计师使用 css 来固定基本字体大小时……

..它们阻止用户定制自己的阅读体验，最终导致内容难以访问。如果您的字体大小以像素为单位设置，浏览器设置将不会改变任何事情。

设置灵活的默认字体大小

第一课是将权力交还给用户。不要阻止用户设置他们自己的字号，但要确保你从一个公平的竞争环境开始。将基本字体设置为浏览器默认值的100% ：

然后我们可以从那里开始工作。

我们的排版比例

我们仍然需要定义我们的各种排版元素出现的大小，特别是如果我们使用 CSS 重置技术来删除所有默认大小。一个相当典型的模块化秤看起来像这样：

这些数字已经使用了几个世纪，计算出来是为了优化比例，而不必实际制造太多用于印刷的块。有各种聪明的数学可以证明这样的比例是合理的，我相信你会欣赏这个范围也很赏心悦目。

我们将通过像这样应用 CSS 将这种比例转换为我们自己的排版：

然而（正如我们已经说过的）使用固定像素值是不灵活的，所以让我们纠正一下......

什么是Em？

em 是计量单位。就像像素一样，ems 可以确定网页上元素的大小。与绝对的像素不同，ems 是相对于其父字体大小的，这是很多混淆的地方。

1em 等于继承的字体大小。如果a的字号<section>设置为16px，那么其中1em<section>就相当于16px。如果那个的字体大小<section>变成20px，那里面的1em<section>就相当于20px。

Ems 的名字来源于印刷术。该术语首次使用的确切时间尚不清楚，但由于大写字母 M（发音为emm）最接近于放置印刷字母的方形印版，因此它开始将其名称借给测量。无论所讨论字体的点大小如何，大写字母 M 的块都将定义 Em。

em 通常比字母大一点，但你明白了。

如何将像素转换为 Em

我们已经开始以像素为单位设置排版比例，那么我们如何将其转换为 em？一个简单的计算，它表示所需的字体大小与正文字体大小的关系：

使用我们假设为 16px 的 body 大小，旨在转换我们的 36px <h1>，我们得到：

下面是我们的比例是如何转换的，使用上面的方法：

其中一些值可能会有点复杂，但不要害怕小数位尽可能精确。浏览器将始终尽最大努力呈现准确的值。

在评论中做笔记很有用，可以提醒自己如何计算每个 em 值。

级联问题

人们对 ems 的最大抱怨来自级联引起的并发症。em 值是相对于它最近的父级的值，如果你不注意的话，它可能会不小心把事情搞砸。看看下面的 css，它旨在使锚点和段落大小相等：

现在看看这段无辜的标记：

如您所料，所有内容都在浏览器中显示良好。段落和锚点都显示为 1.2em，相对于 body font size (1.2 * 16px = 19.2px)。

但是，如果我们要在段落中引入第二个锚点，让我们看看会发生什么：

段落中的锚点大小仍为 1.2em，但现在是相对于父段落的大小，父段落已经是 19.2px - (1.2 * 19.2px = 23.04px)。这为我们在页面的某些部分提供了超大的锚点；几乎不可取。

导航菜单中的嵌套列表项是级联可能失控的典型示例 - 请注意这一点。

修复

没有解决办法；你要做的最后一件事是添加一个额外的规则来减小恰好在段落中的锚点的大小——这是一张去 Migrainesville 的单程票。为了保持您的 CSS 和 html 的可维护性，Keep It Simple™ 很重要。

• 保持你的标记简单和模块化。

• 以一种克制的方式清楚地定义你的 ems——不要把它们扔得到处都是。

• 尝试将字体大小限制为印刷元素；谨慎地将字体大小应用于结构元素。

那应该有帮助！使用 Ems 确实意味着您有时必须非常认真地思考，但这样做会迫使您清理自己的行为并提高编码效率。

雷姆斯

Rems 很有用，其行为方式与 ems 完全相同，只是没有级联。您定义的每个 Rem 都是相对于正文字体大小的。这些天来，支持与您所需要的一样好。

在其他地方使用 Ems 怎么样？

我们已经介绍了 CSSfont-size属性；这是使用 ems 的明智的第一步，但现在让我们看看line-height. 如果有一个属性尖叫着“不要使用像素值”，那就是行高。 

在这种情况下，我们实际上最好使用无单位值。没错，只是一个数字；没有像素或 ems 或任何东西。无单位值是保证元素的后代继承 relative 的唯一方法line-height。即使使用 ems 也可能意味着将计算值传递给嵌套元素。

line-height 应该有多大没有固定的规则，但是 1.5 是一个可以尝试的合理值，并且会使您的排版易于阅读。

结构元素

一旦您开始考虑在字体大小方面保持布局的灵活性，您会发现您越来越少依赖像素来布置页面上的元素。

如果我们谈论的是流体布局，请使用 % 值来确定任何给定元素的宽度，或者让flexbox 和 CSS Grid为您进行测量。

如果需要，可以使用 ems 轻松实现垂直间距。同样，这是一个干净的标记和样式的问题。考虑将边距限制在元素的底部，以便更容易管理垂直节奏。

如果您需要定义一个height（这在灵活的布局中可能很棘手），也可以使用 ems。也许您正在构建导航并需要定义菜单链接的高度 - 它们应该随着字体大小而增长和缩小。

按钮上的圆角？设置border-radius使用 ems，所以一切都可以无缝扩展。试试这款交互式笔；将主体更改font-size为 200%，看看每个按钮会发生什么。

See the Pen  Rounded corners using pixels and ems by Envato Tuts+ (@tutsplus)  on CodePen.

文本阴影，框阴影，同上。

后驱

如果您需要在某些情况下更改所有内容的大小，例如较小的视口？在适当的媒体查询中更改正文的基本字体大小，body { font-size: 90%; }哇哦！您的整个网站会随着点击回车所需的时间而扩展。

结论

立即开始使用 em！无论您是否意识到，您的内容都是基于排版的。您不必完全放弃像素，但开始考虑 ems，您很快就会发现它们使您的网页设计更加灵活。