Responsive htmlタグにfont-sizeを指定しているとremで指定したブレイクポイントがブラウザによって違うっぽい！？

レスポンシブなwebサイトを作るとき最近の流行りはメディアクエリをrem指定だ！と言うことでrem指定にチャレンジしてみた所、どうやら条件によってブラウザの挙動が違っているっぽかったのでメモ。

htmlタグにfont-sizeが指定されているとブラウザによって挙動が異なる!?

em指定をしていた時に簡単にem指定ができる様にhtmlタグにfont-size: 62.5%;を指定したりしていました。こんな風にhtmlタグでfont-sizeを変更しているとremで指定したメディアクエリの解釈が違っているようです。

サンプル

html {
  font-size: 62.5%;
}
body {
  font-size: 16px;
  font-size: 1.6rem;
  background-color: #FFF;
}
// メディアクエリ
@media screen and (min-width: 75rem) {
  background-color: #54C8D3;
}

「rem」とは「root」+「em」の意味で、root要素（html要素）に対して相対的にフォントサイズが指定できます。
オンズ » 【CSS3】フォントサイズは「rem」で指定するのが最適解。

rootであるhtml要素にfont-size: 62.5%;を指定しているのでbodyは1rem = 10px換算になっています。

メリアクエリのremの解釈の仮説

1. メディアクエリで使っているremもhtml要素に対しての相対値なら 750px で切り替わる
2. メディアクエリで使っているremはhtml要素の指定を無視するなら75 × 16px(ブラウザデフォルトフォントサイズ) = 1200px で切り替わる

ブラウザで確認する

確認したOS: Mac OS X Yosemite ( 10.10 )

ブラウザ	切り替わったポイント
Chrome (42.0.2311.90)	1200px	メディアクエリのremはhtml要素の指定を無視
Safari (8.0.5)	750px	メディアクエリのremはhtml要素に対しての相対値
Firefox (37.0.2)	1200px	メディアクエリのremはhtml要素の指定を無視
Vivaldi (1.0.118.19)	1200px	メディアクエリのremはhtml要素の指定を無視

メディアクエリのremの挙動
Safariだけがhtml要素の指定に対しての相対値を取り、確認した限り他のブラウザはhtml要素の指定は無関係なようです。

レスポンシブWEBデザインで最近の流行りのブレイクポイントをremで指定する時はhtmlタグにfont-sizeを指定しているとブラウザによってデザインの切り替わるブラウザサイズが変わってしまう事になってしまうので気をつけた方が良さそうです。フォントサイズをrem指定にしようとすると計算して書いてあげないとダメになるので少しメンドーかなと思いますが、、、

メモ: コリスさんでも紹介されていたSchema UI Frameworkではhtmlタグにfont-sizeの指定はありませんでした。

---

参考

テスタメントシュピーゲル （2） （上） (角川スニーカー文庫)