px,em,rem。Media Queriesではどのサイズ単位を使うとよいのか。


ホームページのレスポンシブ対応、スマホ対応で欠かすことができないMedia Queries。
みなさんはブレイクポイントの指定にどのような単位を使っていますか?
参考書に書かれているものはpxが多いので、何も考えずにpxを使っている人は多いと思います。
僕もそうなんですが、サイズの単位ってpxだけじゃないですね。
一番慣れていて使いやすいのはpxですが、Media Queriesについて、どの単位で指定すると一番いいのか。
そんな考察をこちらのサイトでしてくれています。

PX, EM or REM Media Queries?

日本語翻訳はこちら。
コリスさんがわかりやすく訳してくれています。

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

emってなに?remってなに?な人もいると思いますので、
初耳の人はまずは「em rem」とかで検索してみてください。

emやremていうのは

文字の高さを基準にした単位。1emは1文字分で、環境によって大きさが変化する相対単位。

remはルートのサイズを基準にしたサイズで、どこで使ってもサイズはかわらない。
ルートに依存するので、ルートのサイズを変えるとremで指定しているフォントのサイズも変わる。
emは今の要素のサイズに対する相対単位で、入れ子にできるのでemの中にemを入れるとサイズがどんどん変化する。

上のサイトでは各種ブラウザやサイズの変更をもとに、どの単位が一番正確に動くのか細かく検証しています。

読むのが面倒くさい方のために、
結論としてはemを使いましょうということです。
今回の検証のすべてで正常な動作を確認された単位です。

ということで、私も明日からはemを使うようにします。

[RelService] [Service]