社内の他の人が作ったcssファイルの中で(DWとかで自動でできたものかもだけど)、font-size に pxとrem 両方を併用して記述してるのがあった。
以下みたいなこと。
body {
font-size: 34px;
font-size: 3.4rem;
}
これをやる意味。の仮説
えーと、上から解釈されるから、
まず、
- pxが読み込まれて
- その次にremが読み込まれるので、
- 先に読み込まれたpxは無効になって、
- 後から読み込まれたremだけ有効になる?
これをやる意味。結論
↑の仮説、半分正解。
メジャーなブラウザ(remに対応してる)なら、そうなる。
対応ブラウザ一覧は can i use
に載ってる。
remに対応してないブラウザは、remが読み込まれないので、pxで設定した値が適用される。
対応してないブラウザ例:
- IE8
- 独自ブラウザ
- 音声ブラウザなど
ほとんど無視していいケースが多そうに思う。
参考にしたサイト
http://ideahacker.net/2014/02/12/7486/
コメント