CSS でのレム単位の理解と使用

レムとは

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

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

1rem は、ルート要素の font-size の計算値に等しくなります。ルート要素の font-size が明示的に指定されている場合、rem 単位は属性の初期値を参照します。

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

Rem 単位と Em 単位の比較

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

html { 
  font-size: 100%; 
} 
 
ul { 
  font-size: 0.75em; 
}

リストが別のリストの下にネストされている場合、次のフォント サイズになります。内側のリストは外側のリストのフォント サイズ (つまり 9px) の 75% になります。この問題は数行のコードで解決できます:

ul ul { 
  font-size: 1em; 
}

これでこの問題は解決しますが、それでも料金を支払う必要があります。特別な注意 特に深くネストされた要素。

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

html { 
  font-size: 100%; 
} 
 
ul { 
  font-size: 0.75rem; 
}

すべてのサイズが基準としてルート要素のテキスト サイズに基づいている場合、ネストされた要素に対して個別のスタイルを定義する必要はありません。

テキスト サイズを定義するために rem 単位を使用する

Jonathan Snook は、2011 年 5 月の初めに、「rem 単位を使用してテキスト サイズを定義する」というタイトルの記事を公開しました。ほとんどの CSS 開発者と同様に、彼は em 単位の複雑なレイアウトに関する一連の問題を解決する必要がありました。

当時、IE の古いバージョンはまだ大きな市場シェアを持っており、ピクセルで定義されたテキストを拡大縮小することができませんでした。ただし、前に見たように、em 単位を使用する場合、要素のネストを忘れて予期しない結果が発生する可能性があります。

テキストのサイズを定義するためにレム単位を使用する場合の最大の問題は、これらの値の使用が少し難しいことです。例を見てみましょう。ルート要素のテキスト サイズが 16px であるとします。一般的に使用されるテキスト サイズは、次のように rem 値に変換されます。

16px = 1rem(ベース)

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 */

考慮に値することの 1 つは、一部のブラウザーでは Rem 単位が使用されていないことです。はサポートされていません。したがって、上記のコードは次のように書き換えることができます

html { 
    font-size: 62.5%; 
} 
 
body { 
    font-size: 14px; 
    font-size: 1.4rem; 
} 
 
h1 { 
    font-size: 24px; 
    font-size: 2.4rem; 
}

この解決策が最良の解決策であるように見えますが、このアプローチを推奨しない人もまだいます。ハリー・ロバーツは、レムユニットを実際に使用した経験の一部を記録した記事を書きました。彼の観点からすると、62.5% のソリューションは計算を容易にしますが (フォント サイズ (ピクセル単位) がレム単位のちょうど 10 倍であるため)、開発者はサイトのすべてのテキスト サイズを .xml で書き直す必要があります。

CSS-Tricks の Chris Coyier は 3 番目の解決策を提案しました。彼のソリューションは、これまでに遭遇した 3 種類のユニットを最大限に活用しています。ルート要素の長さの単位は依然として px を使用し、モジュールは rem 単位を使用し、モジュール内の要素は em 単位を使用します。このメソッドは、ルート要素のサイズを簡単に操作し、モジュールをスケーリングできます。モジュール内のコンテンツのサイズは、モジュール自体のテキスト サイズに応じてスケーリングされます。 Louis Lazaris は後に、「The Power of Em Units in CSS」で自分の主張を述べました。

以下の例で、Chris のソリューションがどのように機能するかを確認できます:

コードは SitePoint で見ることができます (@SitePoint クリックしてプレビュー) CodePen で書かれた「CSS で em および rem 単位を使用する方法」 クリックしてプレビュー 。

ご覧のとおり、この問題を解決するために活用されている新しいテクノロジーはありません。おそらく、一部の組み合わせは開発者の想像力によってのみ制限されます。

メディア クエリで rem 単位を使用する

メディア クエリで em 単位と rem 単位を使用することは、「最適な行の長さ」の概念と密接に関連しており、ユーザーにスムーズな読書体験を提供することができます。 2014 年 9 月、Smashing Magazine は、「Size Matters: Mastering the Balance between Text Size and Line width in Web Responsive Design」という 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: <span></span>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 的所有潜能。从你的编辑器开始吧，实验并向我们分享您的成果。