メディアクエリで「em」を使うと基準になるのは何のサイズ？

メディアクエリを書くときの単位って、何を使ってますか？

僕はいまのところpxしか使ってないんですが、先日、「PX, EM or REM Media Queries? 」という記事を読んで、メディアクエリで使うemやrem単位について、逆に混乱してしまったので、自分でも仕様やブラウザの挙動を確かめてみました。

結論から言うと、emもremもSafariで挙動の違いがあるので、pxがクロスブラウザで一番安定した挙動をします。

いったいどういうことになっているのか？
僕自身、めちゃくちゃ混乱してしまったので整理してまとめておきます。皆さんをさらなる混乱に陥れないことを願いつつ。。。

メディアクエリでemを使う際のブラウザの挙動

メディアクエリでem単位を使うと、そのサイズはブラウザのフォントサイズ設定に相対的になると仕様に書いてあります。なので、ブラウザでフォントサイズの初期値が16pxの場合、10em = 16px x 10 = 160pxになります。たとえば、ブラウザの設定でフォントサイズを20pxに変更すると10em = 20px x 10 = 200pxになります。

これはremでも同じです（というか、そういう解釈をしているレンダリング・エンジンが多い）。

ちなみに、まだドラフト段階ですけどMedia Queries Level 4 では、この辺の説明がもう少し詳しく追加されています。

Safari 10と11でバグがある？

2018年4月現在、最新のデスクトップ・ブラウザのほとんどで仕様通りの挙動をするのですが、Safari 10とSafari 11でバグ（？）があるようです。Webkitの仕様の解釈の違いという可能性もありますが、他のモダン・ブラウザとは挙動が違うので要注意です。

まず、Safari 11と10の両方で、「表示を拡大」または「フォントを拡大」した時にemとremで指定したメディアクエリが想定とは違うポイントで反映されてしまいます。表示上、600pxを指定したメディアクエリが690px（600 x 1.15）で反映されるのに対し、37.5em/remを指定したメディアクエリでは794px（≒ 600 x 1.15 x 1.15）あたりで反映されます。

@media screen and (max-width: 600px){
  .mq-px {
    background: #000;
  }
}

@media screen and (max-width: 37.5em){
  .mq-em {
    background: #000;
  }
}

@media screen and (max-width: 37.5rem){
  .mq-rem {
    background: #000;
  }
}

さらに、HTMLのフォントサイズ指定を200%にすると、

html { font-size: 200%; }

Safari 11と10の両方でメディアクエリのremの挙動が他のブラウザとは異なります。本来600pxでメディアクエリが反映されるべきところ、2倍の1200pxでメディアクエリが発動します。

（これ、Webkitにバグレポート出したほうがいいのかな。。。今度、やり方探してみます。。。）

参考： メディアクエリの仕様

勧告されているメディアクエリの仕様には使用する単位について以下のように書かれています。

The units used in media queries are the same as in other parts of CSS. For example, the pixel unit represents CSS pixels and not physical pixels.

Relative units in media queries are based on the initial value, which means that units are never based on results of declarations. For example, in HTML, the ‘em’ unit is relative to the initial value of ‘font-size’.

— Media Queries – W3C Recommendation 19 June 2012

以下に意訳してみます。

メディアクエリで使われる単位はCSSの他の部分で使われるものと同じです。例えば、ピクセル単位は物理的なピクセルではなくCSSピクセルを表します。

メディアクエリの相対単位は初期値（initial value）を基準とし、単位は決して宣言の結果を基準としないことを意味します。例えば、HTMLでは’em’単位は’font-size’の初期値に関連します。

さいごにひとこと

こちらの記事（英語） にも書いてあるんですが、結局、メディアクエリを使うときはpxを使うのが無難だというのが結論です。フォントやレイアウトの長さの指定をemやremをフル活用してやっている場合はメディアクエリでemを使っても良いと思いますが、上述したようなブラウザの挙動の違いがあることをしっかり把握しておいたほうが良さそうです。

さて、Webkitのバグレポートの出し方探さなきゃ…。

2018年4月27日に公開され、2020年2月17日に更新された記事です。

この記事をシェアする

• ツイート
• シェアする
• ブックマーク
• Pocketに保存