CSS REM - 什么是 REM？

Jimmy_is_jimmy

发布于 2023-05-23 17:37:02

6230

发布于 2023-05-23 17:37:02

本文，我们将探讨 CSS 中使用 REM（Root EM）。

CSS 中 REM 是什么？

REM 代表 font size of the Root element，即 Root EM。REM 是值/数据类型长度的值。长度的另外一个值是我们老朋友 - 像素 px。每个接受长度作为值的属性都接受 REM 值。比如：margin, padding, font-size 等。

我们为什么需要考虑使用 REM 单位呢？

我们为什么要使用 REM？

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

绝对长度值

绝对长度值的例子如：px - 等于 1/96 英寸，cm - 相当于 37.8 px 或者 25.2/64 英寸。更多的内容，参考 MDN。

当你使用这些长度的时，你可以确定它们的大小始终大致相同。当你知道确切的尺寸的时候，这很有用。但是，不要忘记了，人们可能使用不同的浏览器设置，无论是基于喜好还是访问性需求的原因。

相对长度值

相对长度值是根据其他一些值参考的。也就是说要有第 1 参考值。相对长度有 REM，EM，vw 和 vh 等。

EM 的定义：

父元素定义的 font-size 值
子元素相对父元素 font-size 处理长度值

比如：

<html style="font-size: 16px">
  <body>
    <div style="width: 1.2em;" class="1.2em">
      <div style="width: 1.4em;" class="1.4em">inner</div>
    </div>
  </body>
</html>

我们定义了根元素的字体大小是 16px；那么，我们能获取到类名 1.2em 的长度是 16 * 1.2 = 19.2 px，获取到类名 1.4em 的长度是 16 * 1.2 * 1.4 = 26.88px。

VW 代表视窗的 1% 宽度。

比如：

<div class="10vw" style="width: 10vw;">10vw</div>

我们定义了类名 10vw 的宽度是 10vw，该元素宽度将会是可视窗口宽度的 10%。

很明显，相对长度值有个比绝对长度值的优势：站点响应式布局。

REM 和 Root Font Size

REM 的定义和根元素的字体大小有关。该根元素可以是 :root 伪类选择器或者 html 标签选择器。

在 HTML MDN 文档中，:root 就是代指 html 根节点。但是有一个不同的地方 - 样式优先级，:root 优先级大于 html

1 rem 代表根元素的 font-size。这就意味着 1 rem 在你整个代码中都是固定的值。如果根元素的 font-size 值并未更改，则默认是 16px。如下：

html {
  font-size: 18px; // 默认值是 16px
}
h1 {
  font-size: 2rem; // 2 * 18px = 36px
}

当然，我们也可以使用百分比更改根元素的 font-size 大小。根元素的 62.5% 等于 10px。如下：

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

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

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

例如，一些视力障碍人员可能需要缩放到 400% 才能看到你的文本。使用 REM 可以确保你的文本满足这些需求，因为字体大小是相对于用户选择的默认字体大小定义的（而不是浏览器默认的字体大小）。

使用 REM 响应式设计

比如 article by 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: light-blue;
}

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

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

相信看了上面的代码，读者已经明白。