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

Advertisement

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

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

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

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

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

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

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

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

デスクトップ・ブラウザで確認してみる

では、各デスクトップ・ブラウザで仕様通りに動いているのか確認してみます。

以下の4つのパターンで挙動を確かめてみました。デモページのようにメディアクエリで600px37.5em37.5remを指定した場合にブラウザがどのような挙動をするのか確認してみました。

デモはこちら

仕様通りの解釈だと以下のようになるはずです。

1. ブラウザのデフォルト設定

どれも600pxの幅で表示が切り替わる。

2. ブラウザで表示を拡大

表示を拡大してもメディアクエリは影響を受けないため、表示は大きくなるがデフォルト設定の場合と同じ挙動をする。

3. ブラウザのフォントを拡大

emremはブラウザのフォントサイズの初期値を基準とするため、ブラウザのフォントサイズを変えると幅は変わる。たとえば、ブラウザでフォントサイズを20pxに変更した場合、37.5emを使ったメディアクエリは37.5 x 20 = 750pxで切り替わる。

4. HTML要素のフォントサイズを2倍に指定

メディアクエリで使うemremはブラウザの初期値を基準とするため、HTML要素のフォントサイズを変更しても影響を受けない。

デスクトップ・ブラウザでの確認表

以下のテーブルでは、上述通りの挙動をする場合に「◯」としています。

デフォルト 表示拡大 フォント拡大 HTML要素の
フォント2倍
Chrome 66
Firefox 59
Safari 11 バグ? バグ? バグ?
Safari 10 バグ? バグ? バグ?
Edge 16 できない?
Win10 IE11
Win7 IE10
Win7 IE9

各ブラウザでフォントを拡大表示する方法

  • Chromeは設定から、Firefoxはオプションからフォントサイズを変更できます
  • Safariは「表示」を選択してaltキーを押すと「拡大」メニューが「文字を拡大」に変わります
  • IE11、10、9はaltキーを押すとメニューが出てきて「表示」から「テキストサイズ」を選べます
  • Edgeはフォントサイズの変更方法を見つけられませんでした(知っている方いたら教えてください!)

Safari 10と11でバグがある?

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

まず、Safari 11と10の両方で、「表示を拡大」または「フォントを拡大」した時にemremで指定したメディアクエリが想定とは違うポイントで反映されてしまいます。表示上、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にバグレポート出したほうがいいのかな。。。今度、やり方探してみます。。。)

モバイル・ブラウザで確認してみる

以下の2つのデモページで確認をしてみました。まだ2種のブラウザでしか確認できてないですが、できたら他のブラウザでもテストして情報を追加して行きたいと思います。

iOS Safari

iOS Safari(iOS 11.3)では、フォントのサイズを変えられないのでデフォルトの状態とHTML要素のフォントサイズを200%にした場合で確認をしてみました。

pxとemは仕様通りですが、デスクトップSafariと同様に、HTML要素のフォントサイズを2倍にするとremだけ数値が2倍でメディアクエリが反応してしまうようです。

Android

Nexus 5のAndroid 6.0.1のChrome 66.0.3359.126で確認しました。AndroidのChromeでは「設定」から「ユーザ補助機能」を選ぶとテキストの拡大と縮小ができるのですが、ここからテキストを拡大しても、emとremのメディアクエリに影響がありませんでした。これをバグと見るか、この設定はフォントサイズの変更ではないのか?わからないですが…。

モバイル・ブラウザでの確認表

以下のテーブルでは、上述通りの挙動をする場合に「◯」としています。

デフォルト 表示拡大 フォント拡大 HTML要素の
フォント2倍
iOS Safari 11.3 できない?
Android Chrome 66 バグ?

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

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

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を使うのが無難だというのが結論です。フォントやレイアウトの長さの指定をemremをフル活用してやっている場合はメディアクエリでemを使っても良いと思いますが、上述したようなブラウザの挙動の違いがあることをしっかり把握しておいたほうが良さそうです。

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

About the author

Rriverの竜(りょう)です。「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、東海岸のボストン近郊でウェブ制作を開始。帰国後、東京のウェブ制作会社に勤務。現在は組織のウェブ担当者として日英バイリンガルウェブサイトの運営に携わっています。より詳しくはこちら

記事へのコメントはもちろん、執筆・翻訳、レスポンシブなウェブサイト制作、コラボのご相談などもTwitter @rriver またはFacebook でお気軽にご連絡ください。

“メディアクエリで「em」を使うと基準になるのは何のサイズ?” への2件のフィードバック

  1. myakura より:

    WebKitのズーム時のバグについては、 https://bugs.webkit.org/show_bug.cgi?id=41063 で報告済みですね。

    • ryo より:

      ありがとうございます。
      2010年にバグとしてレポートされてるのにいまだに解決されてないんですね。なにか修正できない理由か考えがあるんですかね。。。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です