1. まとめトップ

px? em? 結局どっち? Media query のブレイクポイントに使う単位は

あなたがメディアクエリーのブレイクポイントに使っているのは px ですか? それとも em ですか? そちらの単位を使う理由は? 答えられなかったらこの記事を読んでください。

更新日: 2019年02月01日

1 お気に入り 158 view
お気に入り追加

この記事は私がまとめました

ここ数年のコーディング界に混乱をまき散らした「ブレイクポイントの単位問題」に挑む!

あなたはどっちを使っていますか? px それとも em はたまた rem?
その単位を使うのはなぜ?

サンプルコードでは px が使われることが多かったためでしょうか、これまで漫然と px を使ってきました。しかし「em を使うのがベスト」とする記事を読んでからは em を使うようなりました。ところが今度は「em では不具合がある」という記事を目にし、「じゃー結局どーすりゃいーの!!!」となったので調べてみました。

em がベストとする記事

em だと safari で問題があるとする記事

The short answer is set an explicit root font size in pixels. It will override the user's custom default font size which is mildly annoying for the user, but it will force them to zoom instead which always behaves the way you want.

対策法が提示されています。

(意訳)
root(html) の font-size に 16px など px 単位を指定したうえで Media query の単位に px を使う。
ブラウザのフォント設定を上書きしてしまうが、拡大したい人にはブラウザのズーム機能を使ってもらう。

結論

px か em の2択。どちらも一長一短。

1. em を使う。

デスクトップ版 safari で拡大時に表示が崩れるが、少数派なので切り捨てる。

2. px を使う

root(html) の font-size に 16px など px 単位を指定したうえで Media query の単位に px を使う。
ややユーザビリティが損なわれるが妥協する。

1