CSS REM – CSS 中的 REM 是什么？CSS 中的 REM 是什么？这篇文章是关于其中一个值，即 REM，

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

CSS 中的 REM 是什么？

这篇文章是关于其中一个值，即 REM，它代表 Root EM。REM 是值/数据类型的值length。的另一个值length是我们的老朋友像素 ( px)。每个接受长度作为值的属性都将接受 REM。其中一些是margin,padding等。

你可能想知道为什么要考虑使用 REM？让我们在下一节中看看为什么。

CSS 中的相对值与绝对长度值

CSS中有两种长度值：绝对长度值和相对长度值。

绝对长度值

绝对长度值的示例是：（即 1/96px英寸）、in（一英寸）或cm（即 37.8 像素或 25.2/64 英寸）。您可以在MDN中找到有关这些值的更多信息。

当你使用这些长度值时，你可以确定它们总是或多或少相同的大小。当你知道输出的确切尺寸（主要用于打印布局）时，这尤其有用。但如果不是这种情况，它就不那么有用了，就像所有不同的屏幕尺寸一样。

并且不要忘记人们使用的可能不同的浏览器设置，无论是因为偏好还是可访问性需求。

相对长度值

相对长度值是根据一些其他值定义的。例如，它们是REM、EM和vw。我们将REM在下面详细讨论，所以让我们简要讨论其他的。

EM定义相对于：

涉及属性时父元素的字体大小font-size，以及
当我们处理其他属性（如height.

vw代表 1% 视口宽度。也就是说，如果将width属性定义为 10vw，则元素将占据可用视口宽度的 10%。还有更多，您可以在此处找到它们。

这些相对长度值比绝对值具有明显的优势，因为它们可以帮助您的网站响应。也就是说，您的网站会自动适应可用屏幕尺寸的大小，并以可预测的方式进行调整。

根 EM 和根字体大小

REM 是相对于根元素的字体大小定义的。根元素由:root伪类或html选择器匹配。

1rem因此采用赋予font-size根元素的值。这意味着 1 个 REM 在整个 CSS 代码中保持相同的值。如果用户不更改根元素的字体大小，则此值通常为16px.

这是一个例子：

html {
	font-size: 18px; // default value would be 16
}

h1 {
 	font-size: 2rem; // 2 * 18px = 36px;
}

2rem从to向后推理px并不是一项艰巨的任务。但是您是否需要在附近放置一个计算器才能知道您设置为 1.125rem 的子标题的确切字体大小（即：16 * 1.125: 18px）？

值得庆幸的是，有一种巧妙的方法可以解决这个问题。请记住，您还可以使用百分比 (%) 指定根元素的字体大小，开发人员发现根元素的默认值的 62.5% 等于10px. 这很好地简化了事情：

html {
	font-size: 62,5%; // 16px * 0.625 = 10px;
}

h1 {
	font-size: 1.8rem; // 10px * 1.8 = 18px;
}

使用 REM （或其他相对长度值）对于font-size可访问性是必须的，因为px在某些浏览器中，当浏览器设置更改时不会调整大小。

例如，由于视觉障碍，有些人可能需要放大 400% 才能阅读您的文本。使用 REM，你可以确保您的文本符合这些需求，因为字体大小是相对于用户选择的默认字体大小定义的。

使用 REM 的响应式网页设计

首先让我说响应式网页设计是一个广泛的主题，具有许多不同的方面。freeCodeCamp 的课程中有两个关于响应式网页设计的证书（如果您有兴趣，请在www.freecodecamp.org/learn上查看这些证书）。

下面我将专注于 REM 如何帮助使网页响应。

Google 在这篇关于响应式网页设计的文章中鼓励您将行长限制为不超过 10 个字。这符合经典的可读性理论。

他们建议你应该使用带有断点的媒体查询，这样你的内容/文本行的宽度不会太长。这有助于提供最佳的阅读体验。

这是受 Adrian Sandu的这篇文章启发的示例：

html {
  margin: 0;
  padding: 0;
  font-size: 62.5%;
}

#divOne {
  width: 100%;
  box-sizing: border-box;
  font-size: 1.6rem;
  padding: 0.5rem;
  background-color: lightblue;
}

@media (min-width: 27.1875rem) { // first breakpoint: 27.1875*16px= 435px 
  p {
    font-size: 1.6rem;
  }
#divOne {
  width: 41.8rem;
  background-color: yellow;
  margin: auto;
  }
}

@media (min-width: 40.78125rem) { 1.5 * first breakpoint: 653px
  p {
    font-size: 2.4rem; // 1.5 * font-size first breakpoint
  }
#divOne {
  width: 62.7rem; // 1.5 * width of first breakpoint
  background-color: green;
  padding: 0.75rem; // 1.5 * padding of first break point
  margin: auto;
  }
}