我喜欢参加技术社区。除了从我的经验比我更多的人那里学习很多东西，我也有机会分享一些我从其他开发人员那里学到的东西。此外，当试图回答一些生命时，我强迫自己研究并最终知道了一些我知道它们有效的吨，但我不知道为什么。

最近在Alura Discord上，我向想要在较小屏幕上解决布局问题的用户碰到了再见。她的消息来源太大了，她的资料被包含了。不和谐的一位通常建议她将源大小更改为rem。

，不是我第一次看到这种混乱。

我从事一个项目，经验丰富的开发人员使用了一个将所有措施最初转换为PX（像素）的库，以为他在为该网站的响应范围做出了贡献。

知道哪个版式是一个受到开发人员几乎没有感情的主题（是的，我在与您宣布的字体大小和字体家庭聊天，并且完全忽略了字体 - 异常和线条高），我决定在网络开发中使用文本时，写这篇文章以讨论一些好的实践。

1）在某个地方集中印刷信息

我看到的第一件事是重复源大小的声明。

在引擎盖中，开发人员声明：

.cabecalho{
  font-size: 18px
}

片刻之后，这个人需要声明：

.titulo{
  font-size: 18px
}

这有效，这当然是。但是，如果项目中使用的源尺寸发生了变化，该怎么办？我们需要进行一次寻宝游戏才能找到所有发生的事件。

和更改。

一个。

a。

一个。

几乎没有实用，不？

我们可以用来考虑如何解决这个问题的程序中的原则：干燥（不要重复自己 - 重复）。他假设，如果我们从方式或信息中复制摘录，则可以在不同的或可变函数中隔离，该功能可以在代码中的其他地方调用或引用。P>>

然后，我们可以将NOS源大小声明为CSS自定义属性（自定义属性，CSSA的各种变化）。

: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，因为它是一个绝对度量，也就是说，它不能适应用户的偏好。在源尺寸中使用PX使Alberto的经历不那么令人满意，也许是为了使他无法访问其中包含。

ão在来源大小中使用PX时会发生什么：我们忽略了通常的偏好，并强加了我们选择的确切大小。

幸运的是，我们使用措施单位RE解决了这个问题。

REM基于浏览器的标准源大小。由于标准为16px，通常1REM等于16px。

但是，我需要在项目中使用18px，否16px。

裂纹：在标准范围内，18PX等于1.125REM。 â只是将您想要的价值除以16。

遵循一些共同值的列表：
.25REM = 4px;
.5REM = 8px;
.75REM = 12px;
1.5REM = 24px;

意识到我说这些通常是 PX中的其余值。这是因为此转换是使用浏览器的模式值进行的。对于我们的朋友阿尔贝托（Alberto），这将有所不同：1M等于24px，1.125m等于27px。

。

因此，每个人都会获胜：谁使用源标准尺寸的人将具有相同的经验，但是选择更改的人都有尊敬的选择。

让我们看看我们的声明如何在项目1中：

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

会转：

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

yeâcil，woograph？

还有一件事：很多人，因为我发现很难做分裂16，请执行以下操作：

html{
  font-size: 62,5%
}

因此，模式源变为10px，定义REM中的值更加狂热。很棒，不？

否。

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

入口，请勿更改浏览器的基本源。这可以为您带来一些安慰和轻松，但它可以给您的平常和项目员工带来不良后果。

3）仍然可以解决响应能力

现在您知道了什么是REM以及如何使用它，您的网站将全部响应和美丽，而不是吗？

您，一个谨慎的人，阅读了本文的介绍，并且已经知道否。让我们理解这一点。

当我们谈论响应能力时，我们通常在谈论一个适应存在的各种屏幕尺寸的站点：该网站在手机，平板电脑，笔记本电脑屏幕和超级监视器上打开。

事实证明，剩余与屏幕尺寸无关。 1REM在移动屏幕或电视上以模式为16px。

由于它不调用屏幕的大小，因此可以说您为1600px屏幕创建简历。然后您定义了这样的恢复的宽度：宽度：100rem。

您将获得使用标准源的用户的1600px简历，但是如果任何享受将标准源更改为20px，您的保留为2000px，在您想到的屏幕上产生了溢出。

我在Codepen上以此为例。由于每个读者都会在不同的屏幕上看到此内容，因此我通过将宽度为100％，从16px dimini并增加了1REM。这样，使用标准尺寸就可以了，但是当用户的标准不同时，我们的布局就会中断。这是因为在这种情况下，我们不想使用REM或PX。理想是要享受百分比。但是，响应能力的潜水是另一篇文章！

或访问aqui。

观察：我将源定义为16px的HTML，使我们能够更有利地进行标准源更改测试。这一系列代码具有纯粹的教学目的。

在下一个示例中，我们可以看到盒子内的文字有时会在里面，有时会溢出，因为我们开玩笑说减少和增加屏幕，或者通过输入更改标准源。

o comportament - errático。

建立了盒子的宽度和高度，以便当遏制变化时，我们会从布局中休息。结论是：我们的H1的来源定义为剩下的没有响应能力。

或访问aqui。

观察：我使用高度为教学目的确定了该DIV的高度。确定包含元素的高度是响应能力的不良习惯。

“盖乌斯，我的世界已经下降了！我该如何离开我的响应式项目的来源？”

最常见的方法是与他们一起响应良好的来源：媒体亲爱的。

使用此，您可以定义从我们说的一定屏幕尺寸（1200px） - 它的资源为12px，16px和20px Vain的大小为18px，24px和32px - 是的，在此博客上，我们传播了手机的词-first。

将是这样的：

: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，正如我们在上一个T.P.中看到的那样，将有助于使我们的网站访问。看到我说的是有助于使其访问。问题可访问性是广泛且多方面的，我们需要采取许多措施，以确保我们网站上可能的母亲的可访问性。我们必须关注颜色，带键盘，屏幕阅读器的导航等等。在REM的情况下，我们只处理一个外观：来源的大小。

为了说明响应能力和可访问性之间的区别，我创建了此示例。在其中，我们有4种文本案例：

1）nã£o-o-o-o-o-osable（根据屏幕尺寸不更改，使用PX）

2）非响应且可访问（根据屏幕尺寸没有更改，但使用REM）

3）反应灵敏而不是A级（根据屏幕尺寸更改，但使用PX）

4）响应且可访问（根据屏幕尺寸更改，并使用REM）

搅拌屏幕的宽度和源大小，以查看源大小在每种情况下的表现

或访问aqui

通过这些示例，我们可以看到，是的，它已经从您的时间到您替换所有PX来源，但没有误认为：这不会使您的网站响应迅速。P>

4）定义线条的大小

当您要上学或需要拥有X号X页面的大学工作时，您会尝试更改线路的高度，以占用更多的空间。>>>>>>>>>

放置2倍的空间，没有人会感知到头部。

事实是，该行的高度在文本的可读性方面有所不同（这里的正确术语是读取。

非常常见的是，在其中文本具有定义的源famãlia，重量和大小，但没有声明该行的高度。

当我们这样做时，我们将浏览器的选择高度选择委托，每个浏览器都有不同的模式。不是一个好人吗？

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

我们必须遵循与源大小相同的原理：无PX！

想象您有一个1REM源（没有px来源，还记得吗？），并以20px将线高。如果用户的标准来源为24px，会发生什么？没错：字母的来源将变为24px，但是线的高度将以20px锁定，并且文本都会纠结。

或访问aqui

它有一种更幻想的方法：此属性接受百分比。因此，我们可以像在Microsoft Word：1、1.2、1.5、2。

那样声明线条高。

在我们的示例中，如果我的1REM和线路高源为1.25，则每个标准的值将为16px至源大小，线大小为20px。但是，如果人使用的标准来源为24px，则值分别为24px和30px。因此，我们将始终在源高度和线路之间有相同的建议。要改进：如果我们的源规模随媒体的宠儿而变化，我们需要重新列出线路高度！

请参阅此示例：在这里，我们将REM使用到源，用媒体查询更改它们，并按比例定义与源大小的线路高度。

或访问aqui

包括£o

在本文中，我们学到了一些良好的排版实践，我们看到了如何对我们的来源进行更多控制，如何避免重复道路的重复以及如何使我们的文本更易于访问和响应。

在我们在这里看到的所有内容，您已经知道有关排版所需的所有内容，以进行无可挑剔的Web项目。但是我们总是可以去做，而不是吗？

您注意到我说过，与他们一起做出反应源的最常见方法：媒体亲爱的。

，如果我告诉您，您可以在不使用媒体宠儿的情况下使来源的大小变化？

？

请注意，很快就会发表一篇文章，谈论如何实施流体排版技术。