Présentation de l'unité rem en CSS

Aujourd'hui, nous examinons en profondeur l'unité rem. Cette unité est actuellement prise en charge par d'excellents navigateurs, et il existe des solutions de compatibilité pour vous aider à l'utiliser dans les versions inférieures des navigateurs IE.

Qu'est-ce que rem

Peut-être avez-vous entendu le mot « R.E.M. » avant d'utiliser une radio ou un autre lecteur de musique. Aux yeux de ce groupe, ce mot est l'abréviation de « mouvement oculaire rapide pendant le sommeil léger », et en CSS, rem signifie « unité em avec l'élément racine comme référence ». Cela ne vous fera pas abandonner vos croyances religieuses ni vous faire croire en l'homme sur la lune, mais cela peut vous aider à obtenir un design harmonieux et fluide.

Selon la définition de 1rem dans la spécification W3C :

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

Cela signifie

1rem

est égal à la taille de police de l'élément

html

(la taille de police de l'élément racine dans la plupart des navigateurs est de 16px)

Unité Rem vs Em unit

Le principal problème lié à l'utilisation des unités em est qu'elles sont associées à des éléments utilisateur. Dans ce cas, ces éléments peuvent s’imbriquer les uns dans les autres et provoquer des résultats inattendus. Considérons l'exemple suivant. Lorsque la taille du texte de l'élément racine est la valeur par défaut

16px

, nous voulons que la taille de police de toutes les listes soit

12px

:< 🎜. >
html {

font-size : 100 %;}

ul {
font-size : 0,75em;
}
S'il y a une liste imbriquée sous une autre liste, alors la taille de police de la liste interne sera 75% de la taille de police de la liste externe (c'est-à-dire

9px

), nous pouvons toujours passer quelques lignes de code pour résoudre ce problème :

ul ul {
font-size: 1em;
>
Cela peut résoudre ce problème, mais nous devons quand même y prêter une attention particulière ces éléments Deep spéciaux imbriqués.

Lors de l'utilisation des unités rem, les choses deviennent simples :

html {
font-size : 100%;
}

ul {
font- size: 0.75rem;
>
Lorsque toutes les tailles sont basées sur la taille du texte de l'élément racine comme référence, il n'est pas nécessaire de définir des styles distincts pour les éléments imbriqués.

使用 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 的所有潜能。从你的编辑器开始吧，实验并向我们分享您的成果。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!