使用 REM 并不能让您的网站响应式——原因如下

您可以在此处
访问这篇葡萄牙语文章 Você pode acessar este artigo em português aqui

我喜欢加入技术社区。除了能从经验比我丰富的人那里学到很多东西外，它还能让我与其他开发者分享我学到的知识。此外，在尝试解答一些问题时，我不得不进行大量的研究，这让我深入了解了一些我知道有效但不知道其原因的技术。

最近，我在 Alura 的 Discord 社区里，看到一位用户提问，想解决小屏幕上的布局问题。她的字体太大，布局会崩溃。一位 Discord 用户建议她将字体大小改为 REM。

这不是我第一次看到这种误解。

我曾经参与过一个项目，其中一位经验丰富的开发人员使用一个库将所有原本以像素为单位的测量值转换为 REM，相信这有助于提高网站的响应能力。

我知道排版是一个很少受到开发人员关注的话题（是的，我在跟你说话，你只声明字体大小和字体系列，而完全忽略字体粗细和行高），所以我决定写这篇文章来讨论在 Web 开发中处理文本时的最佳实践。

1）将您的排版信息组织在一个地方

我经常看到的第一件事就是重复声明字体大小。在标题上，开发人员声明：

.cabecalho{
  font-size: 18px
}

片刻之后，他们需要声明：

.titulo{
  font-size: 18px
}

这当然有效。但是，如果项目中使用的字体大小发生了变化怎么办？你需要进行寻宝游戏来查找所有出现的情况。

并改变它们。

一。

经过。

一。

不太实用，对吧？

我们可以使用一个编程原则来解决这个问题：DRY（不要重复自己）。它指出，如果我们要复制一段代码或信息，可以将其隔离在一个函数或变量中，以便在代码的其他地方调用或引用。

因此，我们可以将字体大小声明为 CSS 自定义属性，又称“CSS 变量”：

:root{
  --fs-1: 12px;
  --fs-2: 16px;
  --fs-3: 20px;
}

.cabecalho{
  font-size: var(--fs-2)
}

.hero-banner{
  font-size: var(--fs-3)
}

main .titulo{
  font-size: var(--fs-3)
}

.rodape{
  font-size: var(--fs-2)
}

这样，我们就可以减少出错的机会，并将这些信息保存在一个地方，大大提高代码的可维护性。

2）永远不要再使用PX

在编程领域，很少有人能如此直截了当地说：永远不要做 X，永远做 Y。通常，实现一个目标的方法有很多，不同的技术各有利弊，我们需要分析每种情况才能确定最佳方法。这正是这个领域的魅力所在。我喜欢认为，在编程中，任何事情都没有绝对正确的方法，只有绝对正确、不错误的方法。

但在这种情况下，我会毫不犹豫地说：您不应该使用 PX 作为字体大小。

给你讲个故事：Alberto 看不清很小的字母。这些字母在他面前乱晃，让他很难进行学校的网页搜索。但当 Alberto 发现可以更改浏览器的默认字体大小后，情况就改变了！浏览器的默认字体大小是 16px，但 Alberto 可以将其更改为 24px，这让他的生活轻松多了。

问题在于，Alberto 想要访问的某个网站的开发者，所有字体都使用了像素 (PX)。而 18px 永远都是 18px，因为它是一个绝对测量单位，无法根据用户的偏好进行调整。使用 PX 作为字体大小会降低 Alberto 的体验，甚至可能让他无法访问该内容。

这就是当我们使用 PX 来设置字体大小时发生的情况：我们忽略用户偏好并强加我们选择的精确大小。

幸运的是，我们可以通过使用 REM 单元来克服这个问题。

REM 基于浏览器的默认字体大小，通常为 16px。因此，通常 1rem 等于 16px。

“但是，Caio，我需要在我的项目中使用 18px，而不是 16px。”。

非常简单：默认测量单位是 18px，相当于 1.125rem。我们只需要将这个值除以 16 即可。

以下是一些常用值的列表：
.25rem = 4px；
.5rem = 8px；
.75rem = 12px；
1.5rem = 24px；

请注意，我说这些通常是REM 的像素值，因为这个转换是使用浏览器的默认值进行的。在 Alberto 的例子中，情况会有所不同：1rem 等于 24px，而 1.125rem 等于 27px。

因此，每个人都是赢家：使用默认字体大小的人将获得相同的体验，但选择更改字体大小的人将获得尊重。

让我们看看第 1 项中的声明是什么样的：

:root{
  --fs-1: 12px;
  --fs-2: 16px;
  --fs-3: 20px;
}

这将变成：

:root{
  --fs-1: .75rem;
  --fs-2: 1rem;
  --fs-3: 1.25rem;
}

很简单，对吧？

还有一件事：许多人发现除以 16 很困难，因此会这样做：

html{
  font-size: 62,5%
}

这会将默认字体大小设置为 10px，从而使得在 REM 中定义值变得更加容易。

听起来很棒，不是吗？

但是，请不要这样做。

这样做可能会让其他开发人员感到困惑，很难撤消，并且可能与项目中可能使用的库发生冲突。

所以，不要更改浏览器的基本字体大小。它现在可能会给你带来一些舒适和便利，但可能会给你的用户和项目合作者带来负面影响。

3）REM 无法解决响应能力问题

现在您知道了 REM 是什么以及如何使用它，您的网站将完全响应并且美观，对吗？

如果你一直很关注，那么你肯定已经读过这篇文章的引言，并且知道事实并非如此。让我们来了解一下其中的原因。

当我们谈论响应性时，我们通常指的是适应各种屏幕尺寸的网站：该网站应该能够在智能手机、平板电脑、笔记本电脑屏幕和超宽显示器上正常运行。

但是，REM 与屏幕尺寸无关。在智能手机屏幕或电视上，1rem 默认为 16px。

由于它不关心屏幕尺寸，假设您为 1600px 宽度的屏幕创建一个矩形，并且您像这样定义该矩形的宽度：width: 100rem。

对于使用默认字体大小的用户，您将获得一个 1600px 的矩形。但是，如果用户将默认字体大小更改为 20px，您的矩形宽度将变为 2000px，从而导致超出您预期的屏幕范围。

我在 CodePen 上创建了一个示例。由于每个读者的屏幕大小不同，我复制了使用 REM 调整内容以适应屏幕大小的场景，即先将宽度设置为 100%，然后减去 16px，再加上 1rem。

这样，在默认尺寸下，一切都正常，但当用户的默认尺寸不同时，我们的布局就会崩溃。这是因为在这种情况下，我们不应该使用 REM 或 PX。使用百分比才是理想选择。不过，深入研究响应式设计是另一篇文章的主题！

或者访问这里。

注意：我将 HTML 上的字体大小定义为 16px，以便我们更轻松地测试更改默认字体大小。该代码片段仅用于教学目的。

在下一个示例中，您可以看到，当我们调整屏幕大小并通过输入更改默认字体大小时，框内的文本有时会适合，有时会溢出。

行为不稳定。

盒子的宽度和高度设置不当，导致内容变化时布局中断。结论是，用 REM 定义 H1 字体大小对响应式设计毫无帮助。

或者访问这里。

注意：我使用 height 来设置此 div 的高度是为了教学目的。设置包含内容的元素的高度不利于响应式设计。

“Caio，我的世界崩溃了！我该如何让我的项目中字体响应式？”

使字体具有响应能力的最常见方式是使用它们：媒体查询。

这样，您就可以定义从某个屏幕尺寸（比如说 1200px）开始，您的 12px、16px 和 20px 字体将具有 18px、24px 和 32px 的大小——是的，在这个博客中，我们宣扬移动优先的福音。

它看起来是这样的：

:root{
  --fs-1: .75rem;
  --fs-2: 1rem;
  --fs-3: 1.25rem;
}

@media (min-width: 75em){
  :root{
    --fs-1: 1.125rem;
    --fs-2: 1.5rem;
    --fs-3: 2rem;
  }

}

不要害怕媒体查询中的 EM 单位。用这个单位声明媒体查询是一个好习惯。关于这一点，我以后可以再详细讨论。

如上一节所述，REM 有助于提高我们网站的可访问性。请注意，我说的是“帮助提高可访问性”。可访问性是一个复杂且多方面的问题，我们需要采取许多措施来确保尽可能多的人能够访问我们的网站。我们需要关注颜色、键盘导航、屏幕阅读器等等。就 REM 而言，我们只处理其中一个方面：字体大小。

为了说明响应式和可访问性之间的区别，我创建了这个示例。它包含四个文本案例：

1）无响应且不可访问（不随屏幕尺寸变化，使用 PX）

2）响应不灵敏且不可访问（不会随着屏幕尺寸而变化，但使用 REM）

3）响应式且不可访问（随屏幕尺寸变化，但使用PX）

4）响应迅速且易于访问（随屏幕尺寸变化并使用 REM）

更改屏幕宽度和字体大小，查看字体大小如何变化。

或访问此处

通过这些示例，我们可以看到，现在是时候用 REM 替换所有 PX 字体了，但不要自欺欺人：仅靠这一点并不能让您的网站具有响应能力。

4）定义行高

当您完成需要一定页数的学校或大学作业时，您可能会想增加行高以使内容占用更多空间。

“设置双倍行距。这样做，没有人会注意到。”你脑海里的声音说道。

事实是，行高对文本的可读性有很大影响（这里正确的术语应该是“可读性”。我鼓励您查找差异）。

在项目中，经常会定义字体系列、粗细和大小，但未声明行高。

当我们这样做时，我们将行高的设置委托给了浏览器，而每个浏览器都有不同的默认值。听起来很糟糕，对吧？

所以，我们应该始终明确声明行高。但是该怎么做呢？使用 line-height 属性！

我们应该遵循与字体大小相同的原则：不采用 PX！

假设你有一个 1rem 的字体（记住，字体大小没有 px），并且你将行高设置为 20px。如果用户的默认字体大小是 24px，会发生什么？没错：字体大小会变成 24px，但行高仍然锁定在 20px，文本会变得混乱。

或访问此处

一种解决方案是在 REM 中定义行高，这样它就可以随字体大小而变化。然而，这样做会导致每次我们在媒体查询中更改字体大小时，都必须同时更改行高，以保持比例不变。

有一种更简单的方法：此属性接受百分比。因此，我们可以像在 Microsoft Word 中一样声明行高：1、1.2、1.5、2。

在我们的示例中，如果我的字体大小为 1rem，行高为 1.25，则值通常为 16px 和 20px。但如果用户的默认字体大小为 24px，则值将为 24px 和 30px。这样，字体和行高的比例始终保持不变。更棒的是，如果字体大小随着媒体查询而发生变化，我们无需重新声明行高！

看这个例子：这里我们使用 REM 单位，用媒体查询改变它们，并定义相对于字体大小的行高。

或访问此处

结论

在本文中，我们学习了一些排版最佳实践，了解了如何更好地控制字体，如何避免代码重复，以及如何使我们的文本更易于访问和响应。

以上就是我们介绍的所有内容，你已经掌握了创建完美网页项目所需的所有排版知识。但我们还可以更进一步，对吧？

您是否注意到我提到过“使字体响应的最常见方式是使用它们：媒体查询。”？

如果我告诉您，无需使用媒体查询就可以改变字体大小，您会怎么想？

所以，请继续关注，因为很快就会有一篇关于如何实现流体排版技术的文章。