ブレイクポイントは「em」で指定〜スマホサイト作成

メディアクエリの設定でブレイクポイントの単位を「px」で指定することが多いと思いますが、「px」で指定するとSafariで思わぬ不具合に遭遇します。
これは2016年頃に広がったネタですが、いまだにSafariでは同様の結果になります。

結論から言うと、ベストプラクティスは「em」単位で指定することです。
「em」単位の求め方はこの場合、指定したいpx数を16で割るだけです。

ブレイクポイントの値は em で指定
この場合の計算は16で割るだけ
600pxにしたい場合は、600/16emとする

safariでの問題点
1. html要素でfont-sizeを指定した場合
ブラウザでズームでの問題

safariでの問題点

参考サンプル
このサンプルではブレイクポイントを600pxに指定しています。
これを600px/16pxで　37.5em と　37.5rem　にした場合の検証用です。
赤がpx指定したもの、緑がem指定したもの、青がrem指定したものになります。
600px以上でopacityがかかって色が薄くなります。

HTMLコード

<div class="pixel"></div>
<div class="em"></div>
<div class="rem"></div>

CSSコード

div{
  height:100px;
}
.pixel {
  background: red;
  opacity:1;
  } 
@media (min-width:600px) {
.pixel {
  opacity: 0.5;
  }
}
.em {
  background: green;
  opacity:1;
  }  
@media (min-width: 37.5em) {
.em {
  opacity: 0.5;
  }
}
 
.rem {
  background: blue;
  opacity:1;
 }  
@media (min-width: 37.5rem) {
.rem {
  opacity: 0.5;
 }
}

通常はchromeもfirefoxもsafariも問題ないです。どれも同じサイズの時に色が変わります。

html要素でfont-sizeを指定した場合

サンプル2
CSSに次の内容を追加します。

html { 
  font-size: 200% 
}

各要素に個別の指定がない限り、全てのフォントサイズが2倍になります。
そのため、「em」や「rem」指定した場合には、htmlに指定した200％に連動して600px幅でブレイクポイントが働かなくなりそうに思えます。けれども、実際はちゃんと600pxで色が変わります。
これは、「em」と「rem」はブラウザの「font-size」のベースに基づいているためです。

Media Queries Level 3の仕様では次のようになっています。

This media query expresses that style sheet is usable on screen and handheld devices if the width of the viewport is greater than 20em.

@media handheld and (min-width: 20em),
screen and (min-width: 20em) { … }
The ‘em’ value is relative to the initial value of ‘font-size’.

つまり、メディアクエリで使う’ em’値は ‘font-size’の初期値との相対値です。

けれども、この状態で safari では不具合が出ます。青色（rem指定したもの）だけ色が変わりません。
そして、ちょうど2倍のサイズの1200pxになったら変更されます。

どうやら、safariでは’font-size’の初期値ではなく、remだからhtml要素に指定した「font-size」の影響を受けています。
これはバグと言うよりもsafariの解釈の違いだと思います。というか、そもそも’font-size’の初期値との相対値というのが少し変な定義でもあります。’font-size’の初期値を変更するためにhtmlに指定を入れるはずだと思うのですが。。。

htmlに基準のfont-sizeを設定する場合は多く、またレスポンシブではこれを有効活用してレイアウトを変更する場合も多いです。しかもsafariはiPhoneユーザーに使われていますので予期しないバグになる恐れがあります。

そのような理由により、メディアクエリでは「rem」は使えません。