我喜欢成为技术社区的一部分。除了从我的经验比我更多的人那里学习很多东西，它还可以让我与其他开发人员分享一些我学到的知识。除此之外，在试图回答一些问题时，我不得不进行大量研究，这使我深入了解了一些我知道的技术，但不知道为什么。

最近，在Alura的Discord社区中，我遇到了一个想在较小屏幕上解决布局问题的用户的问题。她的字体尺寸太大，布局将会破裂。一位不和谐用户建议她更改“ rem”字体尺寸测量值。

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

我从事一个项目，经验丰富的开发人员使用了一个库，该图书馆最初以像素为rem，认为这有助于该网站的响应能力。

知道排版是一个受到开发人员很少关注的话题（是的，我正在与您交谈，他只宣布字体大小和字体家庭，并且完全忽略了字体重量和线路高点），我决定去在网络开发中使用文本时，写这篇文章以讨论最佳实践。

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

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

.cabecalho{
  font-size: 18px
}

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

.titulo{
  font-size: 18px
}

当然可以。但是，如果项目中使用的字体尺寸发生变化，该怎么办？您需要进行寻宝游戏才能查找所有事件。

并更改它们。

一个。

by。

一个。

不是很实用，对吗？

我们可以使用一个编程原则来解决这个问题：干燥（不要重复自己）。它指出，如果我们复制了一块代码或信息，则可以在代码中其他位置的函数或变量中隔离。

因此，我们可以将字体大小声明为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。

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

Easy-peasy：在默认测量中，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：width：100rem。

您将获得1600px矩形，适用于使用默认字体大小的用户。但是，如果用户将默认字体大小更改为20px，则您的矩形现在将为2000px宽，会在屏幕上引起溢出。

我在Codepen上创建了一个示例。由于每个读者将在不同的屏幕上查看此信息，因此我通过将宽度设置为100％，然后减去16px并添加1REM来复制使用REM将内容调整为屏幕大小的方案。

以这种方式，使用默认的大小，一切都可以正常工作，但是当用户的默认大小不同时，我们的布局会断开。那是因为在这种情况下，我们不应该使用REM或PX。这是合作百分比的理想选择。但是深入研究响应能力是另一篇文章的话题！

或访问here。

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

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

行为不稳定。

设置盒子的宽度和高度的方式是，当内容变化时，布局会破裂。结论是，用REM定义我们的H1字体大小根本没有帮助。

或访问here。

注意：我使用高度为教学目的设置了此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的更改）

更改屏幕宽度和字体大小，以查看字体大小的表现。

或访问here

在这些示例中，我们可以看到已经过去了您用REM替换所有PX字体的时间，但不要欺骗自己：仅此而已，这不会使您的网站响应。

4）定义您的线高度

当您从事需要一定数量的页面的学校或大学作业工作时，您可能会很想增加线的高度以使内容占用更多空间。

“设置双间距。做，没人会注意到。”

事实是，线的高度在文本易读性上有所不同（此处正确的术语是“可读性”。我鼓励您查找差异）。

找到字体系列，重量和大小的定义的项目非常普遍，但没有声明线高。

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

因此，我们应该始终明确声明我们的线高度。但是我们该怎么做？带有线路高度属性！

我们应该遵循与字体大小相同的原理：没有px！

想象一下您的字体为1REM（请记住，没有PX的字体尺寸），然后将行高度设置为20px。如果用户的默认字体大小为24px，会发生什么？没错：字体大小将变为24px，但线高将保持在20px，并且文本将变得混乱。

或访问here

一种解决方案是定义REM中的线高，这可能随着字体大小而变化。但是，通过这样做，每当我们更改媒体查询中的字体大小时，我们也必须更改线的高度，以维持比例。

有一个简单的方法：此属性接受百分比。因此，我们可以声明Microsoft Word中过去的线高：1、1.2、1.5、2。

在我们的示例中，如果我的字体为1REM，线高为1.25，则值通常为16px和20px。但是，如果用户的默认字体大小为24px，则值将为24px和30px。这样，我们始终保持字体和线高之间相同的比例。更好的是，如果我们的字体大小随媒体查询而变化，我们不需要重新列出线的高度！

请参阅此示例：在这里，我们使用REM单元，使用媒体查询更改它们，并将线高相对定义为字体大小。

或访问here

结论

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

有了我们在这里看到的所有内容，您已经知道有关版式创建完美无瑕的Web项目所需的一切。但是我们总是可以走得更远，对

您是否注意到我提到过：“ 最常见的使您的字体响应迅速的方法是：媒体查询。”？

如果我告诉您您可以在不使用媒体查询的情况下使字体尺寸变化怎么办？

因此，请继续关注，因为很快就会有关于如何实施流体排版技术的文章。