[CSS]Media Queriesで使う単位はpx, em, remのどれが適しているか検証 -px指定は注意が必要

レスポンシブ用のMedia Queriesを使う時に「@media (min-width: 400px) {}」のように「px」を単位に使用している人も多いと思います。しかし、px指定には注意が必要です。

Webページでよく使用される条件で検証を行い、Media Queriesでなぜpxを使ってはいけないのか、そして何が適しているのかが分かる検証記事を紹介します。

PX, EM or REM Media Queries?

以下、各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

• はじめに
• pxとemとremの検証方法
• 検証1. html要素でfont-sizeを指定
• 検証2. ブラウザでズームが可能
• 検証3. ブラウザでフォント設定が変更可能
• 検証の結果

はじめに

あなたはMedia Queriesで使う単位にpx, em, remのどれが一番いいと思いますか？ 私も同じ疑問を持っており、今まで明確な答えを持っていませんでした。

私が一年ほど前につくった「Mappy Breakpoints」では最初、「rem」を使用していました。しかし、そのIssuesでSam Richardと意見を交わし、「em」が「rem」と相違がないことが分かったので、「em」に変更しました。

「em」と「rem」のほかに、Media Queriesで人気が高い単位は古くから使われている「px」です。しかし単位に「px」使用すると一部のブラウザではズームが機能しないため、この問題が解決したら使用可能になると思います。

ここでは「px」と「em」と「rem」とはどのような単位で、どのように機能するか調べたいと思います。

pxとemとremの検証方法

まずはpxとemとrem用にdiv要素で3つの矩形を作成します。区別がつくように、背景色はそれぞれ変えます。

Media Queriesの単位を比較したいので、3つのセレクタに「min-width」を設定し、目視で分かるようにdiv要素が半透明になるようにしました。

pxベースのCSSは下記の通りです。

次に、「em」と「rem」のCSSを作成します。

この検証の目的は、もしすべての条件が期待通りに機能する時、3つの単位で相違があるかを見ることです。すべての条件とは具体的に言うと、下記の3つです。

1. html要素でfont-sizeを指定
2. ブラウザでズームが可能
3. ブラウザでフォント設定が変更可能

この時点で「16px == 1em == 1rem」と想定すると、「400px」は「25em」「25rem」と等しくなります。

このCSSで3つのMedia Queriesが同じように振る舞うなら、400pxをトリガーにdiv要素は半透明になるはずです。

pxとemとremの基本検証

3つのMedia Queriesすべてで同じブレイクポイントで半透明になったので、この段階ではpx, em, remに相違がないことが分かりました。

検証の基本は無事に終えたので、次のステップではそれぞれの条件で問題がないかテストすることです。もう一度、条件を確認しておきましょう。

1. html要素でfont-sizeを指定
2. ブラウザでズームが可能
3. ブラウザでフォント設定が変更可能

一つずつ検証していきます。

検証1. html要素でfont-sizeを指定

最初の条件は、ごく当たり前のことです。実際にほとんどのWebページで、デフォルトのフォントサイズはこの方法で指定しています。

フォントサイズを「200%」に設定して、検証してみます。
「1em」と「1rem」は「32px」になります。もし「em」と「rem」がフォントサイズのこの変更に影響を受けるなら、「800px」がトリガーになります。

結果は、Chrome, Firefox, IE11で、3つMedia Queriesすべてが400pxで変化しました。

検証1: Chrome, Firefox, IE11

これは正しい動作です。「em」と「rem」はブラウザの「font-size」のベースに基づいているため、html要素に指定した「font-size」の影響を受けるべきではありません。

不幸にも、Safariでは期待通りの動作ではありませんでした。Safariでは「rem」が800pxでトリガーになってしまいました。

検証1: Safari

この現象はSafariのみで、Mobile Safariでも同様でした。

検証1で分かったことは、Media Queriesで「rem」を使うべきではない、ということです。以降の検証でも他の何かが生じないか確認するために「rem」を含めます。

検証2. ブラウザでズームが可能

2番目の条件も、ごく当たり前のことですね。もしWebページの文字が小さかったら、ユーザーはブラウザにあるズーム機能で文字を大きくするかもしれません。

メモ

「em」ベースのサイズ指定のアイデアは、px指定だとズームできない古いブラウザのためのものでした。このことはMedia Queriesで使う単位の相違を検証するのに「px」ベースが機能するかどうかについて役立ちます。

ブラウザでズーム

この検証では、Chrome, Firefox, IEで同じで、「px」のMedia Queriesは「em」と「rem」のMedia Queriesと同じ挙動でした。

検証2: Chrome, Firefox, IE

あなたが今思ったとおりです、赤い背景のpxがSafariはダメでした。

検証2: Safari

この結果は「px」ベースのMedia Queriesは使えないことを意味します。Safariはこれをサポートしていませんでした。

ここでがっかりしないでください。
意外な結果がでる最後の検証にいきましょう。

検証3. ブラウザでフォント設定が変更可能

Web制作者の多くは、設定の奥の方に隠れているので、ユーザーがブラウザでフォント設定を変更しないと信じることを好みます。もし本当にユーザーがそうであるなら、この検証はしなくてもよいでしょう。

しかしユーザーがブラウザでフォント設定を変更しないというデータはありません。WebサイトをフレキシビリティにしておくことはWeb制作者としての義務です。

今回の検証では、4つのブラウザのデフォルトの「font-size」を下記の方法で大きくしました。

• Chrome:

  設定:: 詳細設定を表示:: ウェブコンテンツ

• Firefox:

  オプション:: コンテンツ:: フォントと配色

• Internet Explorer:

  Altキーを押してメニューバーの表示から「文字のサイズ」

フォント設定がどこか分からなかった唯一のブラウザは、Safariでした。その代わりに、最も小さいサイズが16pxより大きくなるように環境を設定しました。

• Safari:

  環境設定:: 詳細:: アクセシビリティ

この検証は唯一、すべてのブラウザで同じ挙動をしました。

検証3: すべてのブラウザ

上のアニメーションのようにpxだけが、em, remより早いトリガーで機能しています。
この検証は期待通りの動作で、バグがありません。

「px」は絶対値の単位で、ユーザーがデフォルトの「font-size」をセットしても、ブレイクポイントは400pxであるべきです。

「em」と「rem」はブラウザの「font-size」に基づいているので、ユーザーがデフォルトの「font-size」を変更した時にはMedia Queriesもそれに合わせてアップデートされるべきです。

ピクセルが好きな人の夢を壊してしまい、残念に思います。「px」ベースのMedia Queriesは正常に機能しません。

検証の結果

検証の結果、Chrome, Firefox, Internet Explorer, Safariの4つのブラウザで機能した唯一の単位は「em」でした。Safariのバグは例外として、「em」と「rem」にどんな相違もありません。

「px」のMedia Queriesは、3つの検証のうち2つでうまく機能しました（Safariを除く）。しかし、「px」のMedia Queriesは、ブラウザでフォント設定を変更するユーザーもサポートするのであれば、正常に機能しません。

故にこれらの検証の結果、私の結論は「em」のMedia Queriesを使用するということです。

もしあなたが「em」のMedia Queriesを使用していないライブラリを使っているなら、その開発者にこの論文を教えてあげてください。もしくは「em」ベースの下記のライブラリに変更してもよいでしょう。

• Mappy-breakpoints
• Breakpoint-sass
• sass-mq