CSS의 rem 단위 소개

오늘은 rem 단위에 대해 자세히 살펴보겠습니다. 이 단위는 현재 우수한 브라우저에서 지원되며, IE 브라우저의 하위 버전에서 사용하는 데 도움이 되는 몇 가지 호환성 솔루션이 있습니다.

rem이란

라디오나 다른 음악 플레이어를 사용하기 전에 "R.E.M."이라는 단어를 들어보셨을 것입니다. 이 밴드의 눈에는 이 단어가 "light sleep while rapid eye movement"의 약어이고, CSS에서 rem은 "루트 요소를 참조로 하는 em 단위"를 의미합니다. 종교적 신념을 버리거나 달에 사는 사람을 믿게 만드는 것은 아니지만 조화롭고 매끄러운 디자인을 달성하는 데 도움이 될 것입니다.

W3C 사양의 1rem 정의에 따르면:

1rem 与等于根元素  的计算值。当明确规定根元素的  时，rem 单位以该属性的初始值作参照。

이는

1rem

가

html

요소의 글꼴 크기(대부분의 브라우저에서 루트 요소의 글꼴 크기는 16px)

Rem 단위 대 Em 단위

<와 동일 🎜>em 단위를 가장 많이 사용합니다. 가장 큰 문제는 사용자 요소와 연관되어 있다는 것입니다. 이 경우 이러한 요소는 서로 중첩되어 예상치 못한 결과를 초래할 수 있습니다. 다음 예를 고려해 보겠습니다. 루트 요소의 텍스트 크기가 기본값

16px

인 경우 모든 목록의 글꼴 크기는

12px

:

입니다. html {

글꼴 크기: 100%;}

ul {
글꼴 크기: 0.75em;
}
if any If 목록이 다른 목록 아래에 중첩된 경우 내부 목록의 글꼴 크기는 외부 목록 글꼴 크기의 75%가 됩니다(즉,

9px

). 이 문제는 몇 가지 방법으로 해결할 수 있습니다. :

ul ul {
font-size: 1em;
}
이 방법으로 이 문제를 해결할 수 있지만 여전히 깊은 관련 요소에 특별한 주의를 기울여야 합니다. 중첩.

rem 단위를 사용하면 상황이 단순해집니다.

html {
글꼴 크기: 100%;
}

ul {
글꼴- size: 0.75rem;
}
모든 크기가 루트 요소의 텍스트 크기를 기준으로 하는 경우 중첩 요소에 대해 별도의 스타일을 정의할 필요가 없습니다.

使用 rem 单位定义文字大小

Jonathan Snook 是第一批使用 rem 单位来定义文字大小的开发者，早在 2011 年 5 月，他就发表了题为《使用 rem 来定义文字大小》 的文章。和大多数 CSS 开发者一样，他必须去解决在 em 单位在复杂的布局上的一系列问题。

在那时候，老版本的 IE 依然有很大的市场份额，并且他们不可以缩放由 px 来定义的文本。然而，就像我们之前看到的那样，在使用 em 单位的情况下，很容易忘记元素之前的嵌套关系，并且得到一个意想不到的结果。

使用 rem 单位来定义文字的大小最大的问题在于这些值有点难以使用。让我们来看一个例子，假设根元素的文字大小是 16px，我们常用的文字大小转换为 rem 值如下：

10px = 0.625rem

12px = 0.75rem

14px = 0.875rem

16px = 1rem (base)

18px = 1.125rem

20px = 1.25rem

24px = 1.5rem

30px = 1.875rem

32px = 2rem

正如我们看到的那样，这些值在计算起来非常不方便。因此，Snook 使用一个叫 62.5 的方式来解决这个问题。然而这并不是一个创新，因为它早已在 em 单位中运用了：

body { font-size:62.5%; } /* =10px */
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */
因为 rem 单位与根元素相关联，Snook 改进后的方案变为了：

html { font-size: 62.5%; } /* =10px */
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */
有一点值得考虑的是有一些浏览器不支持 rem 单位。因此上面的代码可以按照以下方式来改写：

html {
font-size: 62.5%;
}

body {
font-size: 14px;
font-size: 1.4rem;
}

h1 {
font-size: 24px;
font-size: 2.4rem;
}

尽管这个解决方案看起来是最好的解决方案，但还是有人不建议使用这种方式。Harry Roberts 写了一篇文章，里面记录了他在实际使用 rem 单位过程中的一些感受。从他的观点来看，虽然 62.5% 这种解决方案使得计算变得简单（因为字体大小以 px 为单位时的值正好是以 rem 为单位的 10 倍），但是他迫使开发者重写他们网站中的所有文字大小。

Chris Coyier 在 CSS-Tricks 提出了第三种解决方案。他的解决方式充分利用了到目前为止我们遇到的三种单位。根元素的长度单位依旧采用

px

，模块用 rem 单位，模块内的元素使用 em 单位。这种方式可以很容易的操作根元素的大小、缩放模块，模块内内容的大小以模块自身文字大小来进行缩放。Louis Lazaris 随后在 CSS 中 em 单位的强大之处 提出了他的观点。

在下面的例子中你可以看出 Chris 的解决方案是怎么工作的：

代码可以看 SitePoint(@SitePoint) 在 CodePen 写的 《在 CSS 中使用 em 和 rem 单位的方式》。

正如你看到的那样，没有利用新技术来解决这个问题。可能一些组合方式仅仅被开发者的想象力所限制。

在媒体查询中使用 rem 单位

在媒体查询中利用 em 和 rem 单位，与“行的最佳长度”的概念密切向关，并能给用户带来流畅的阅读体验。在 2014 年 9 月，Smashing Magazine 在 web typography 发表了一篇名叫 尺寸那些事: 在 web 响应式设计中掌握文字大小与行宽度的平衡的文章。最有意思的是，文章给出了行的最佳宽度度，45 到 85 个字符（包括空格和标点符号），65 是最理想的行宽值。

粗略的估计一个字节大小就是 1rem，利用这个方法我们就可以用一种移动优先的方式控制内容的单行文本流：

.container {
width: 100%;
}

@media (min-width: 85rem) {
.container {
width: 65rem;
}
}

然而在媒体查询中使用 em 和 rem 单位作为媒体查询的条件时有一个有意思的细节：1 rem，1em 还有浏览器默认文字大小这三值表示这同一个值。这样做的原因可以在媒体查询规范得到解释（特别强调）:

询中相对单位都是以一个初始值作为基准，这就意味着这些单位永远不会基于声明的结果。例如：在 HTML 中，em 单位与用户浏览器或者用户偏好设置中设置的初始文字大小有关，而不是页面上的样式中定义的文字大小。

让我们看一个关于这个特性的一个小例子：

在 CodePen 上看一个关于媒体查询的 demo

首先，在我们的 HTML 文档中，有一个元素将会展现视口的宽度：

`Document width: px`
接下来是两条媒体查询语句，一条是使用 rem 单位，另一条使用 em 单位（这里为了简便，使用了 Sass）

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

 @media (min-width: 20rem) {
   /* 20*16px = 320px */
   background-color: lemonchiffon;
   font-size: 200%;
   /* 200% of 16px = 32px */
 }

 @media (min-width: 30em) {
   /* 30*16px = 480px */
   background-color: lightblue;
   font-size: 300%; /* 300% of 16px = 48px */（译：原文是48px）
 }
}
最后，我们使用一点 jQuery 在页面上显示视口的宽度，并且在窗口缩放的时候更新这个值：

$('span').text($(window).width());

$(window).on('resize', function(e) {
 $('span').text($(window).width());
});
在开头，我们使用了 62.5% 这个方法来说明，修改根元素字体大小不会对媒体查询产生任何影响。当我们更改窗口的宽度时，我们可以看到在 320 px 时，第一条媒体查询开始起作用，到480px第二条媒体查询开始起作用。任何一条在媒体查询中对文字大小声明的改变都没有起作用。唯一一个可以改变媒体查询中宽度的是在浏览器里更改默认文字大小。

因为这个原因，在媒体查询语句中使用 em 单位还是 rem 单位已经不那么重要了。事实上，无论是Foundation v5还是最近刚发布的Bootstrap v4 alpha都在他们的媒体查询中使用了 em 单位。

使用 rem 单位来缩放文档

我们能发现的第三种使用 rem 单位的方式是去构建可缩放组件。使用 rem 来定义元素的宽度，外边距和内边距 通过使用根元素的字体大小作为一个接口使元素缩放一致变为了可能。 我们可以通过下面两个例子来看这是怎么起作用的。

使用 rem 来缩放文档实例一

在这个例子里，我们通过媒体查询中更改根元素的文字大小。就像上一个章节所讲，这样做的目的是为用户定制不同设备下的不同阅读体验。通过 rem 单位来表示宽度，外边距，内边距，这样所有元素就会基于用户的设备大小缩放。

让我们看另一个例子：

代码可以看 SitePoint(@SitePoint) 在 CodePen 写的 《使用 rem 动态缩放模块》

在第二个例子中，我们使用 JavaScript 来做同样的操作。这次用户根据自己的需要手动控制界面的大小。我们可以使用多种方式（可以使用数据库，cookie 还有本地存储）来存储用户数据，这样就可以给用户搭建一个基于用户偏好的个性化系统。

总结

在这里总结一下到目前为止我们对 CSS 中 rem 单位的认识。很显然，在项目中使用 rem 有许多优点，比如：响应式，可缩放，增加阅读体验，增加自定义元素的灵活性。rem 虽然不是一个通用的解决方案，但是通过谨慎的使用，它还是可以解决困扰开发者多年的问题。 我们每个人都可以去挖掘 rem 的所有潜能。从你的编辑器开始吧，实验并向我们分享您的成果。

위 내용은 CSS의 rem 단위 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!