CSSでのremユニットの紹介

今日は、rem ユニットについて詳しく見ていきます。このユニットは現在、優れたブラウザーでサポートされており、IE ブラウザーの以前のバージョンで使用するのに役立つ互換性ソリューションがいくつかあります。

レムとは

ラジオや他の音楽プレーヤーを使う前に「R.E.M.」という言葉を聞いたことがあるかもしれません。このバンドにとって、この言葉は「浅い睡眠中の急速な眼球運動」の略であり、CSS では、rem は「ルート要素を基準とした em ユニット」を表します。宗教的信念を放棄したり、月面人類を信じたりすることはありませんが、調和のとれた滑らかなデザインを実現するのに役立ちます。

W3C仕様の1remの定義によると:

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

これは、

1rem

が

html

要素のフォントサイズ(ほとんどのブラウザではルート要素のフォントサイズ)と等しいことを意味します。は 16px)

Rem 単位と Em 単位

em 単位の使用に関する主な問題は、em 単位がユーザー要素に関連付けられていることです。この場合、これらの要素が相互にネストされ、予期しない結果が生じる可能性があります。次の例を考えてみましょう。ルート要素のテキスト サイズがデフォルト値

16px

である場合、すべてのリストのフォント サイズを

html {

font-size
: 100% ; }
ul {
font-size: 0.75em;
}
別のリストの下にネストされたリストがある場合、内側のリストのフォント サイズは外側のリストのフォント サイズの 75% になります (つまり、 、

12px

)、この問題は数行のコードで解決できます:

ul ul {
font-size: 1em;
}
これでこの問題は解決できますが、それでも次のことに特別な注意を払う必要があります。ネストされた特殊な Deep 要素。

レム単位を使用すると、物事は簡単になります:

html {
font-size: 100%;
}

ul {
font-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 中国語 Web サイトの他の関連記事を参照してください。