「rem」は、CSS3のfon-size 単位。
親要素に継承されず、ルート(html)からの相対サイズが指定出来るので、
とても便利なのですが、Chromeでフォントサイズが大きくなる現象があります。。(涙)
どんな時にフォントサイズがおかしくなるのか?
html { font-size: 62.5%; } body { font-size: 1.6rem; }
こう書いた時に、bodyの文字サイズは62.5%が無効になり100%(デフォルトサイズ)に対して1.6remになってしまいます。
ただ、classやpなどで別でサイズ指定している所は正常なサイズ。
bodyが継承されいる(個別指定していない)要素は大きいサイズで表示されてしまいます。
解決方法
bodyにサイズ指定するなら相対指定をする。
body { font-size: 1.6em; }
bodyもルート要素の為、remをemにしても影響はないです。
それ以外のセレクタはremでOK
他サイトでJavascriptで解決している物もありましたが、これがscript使わず一番簡単な方法だと思います。
Chromeさんは本当にフォントトラブルが多い。。
▼参考サイト
http://n2p.co.jp/blog/tech/chrome-fontsize/