レスポンシブデザインで頻繁に使用するCSS media querysのmax-widthでは
文字サイズを基準としたemを単位に使った場合
必ず、ブラウザの初期フォントサイズ16pxが基準になります。
例えば、iPadよりも幅広いデバイスにだけスタイルを適用させたい場合
ブレークポイントはiPadの最小幅768pxになるので、emになおすとこのようになります。
768(px) / 16(px) = 48em
@media screen and (min-width: 48em) { }
紛らわしいのは
基準フォントサイズを16px以下に補正した上で
全体の単位としてemを使う場合です。
この例よう、htmlでfont-sizeを15pxに変更し
15px基準でのem指定し慣れてしまうと
media querysのところだけ16px基準でem指定するのを忘れそうになります。
/* 基準の文字サイズを15pxに変更 */ html { font-size: 93.8%; } /* 300px幅(15px * 20)でセンタリング */ .wrap { width: 20em; margin: 0 auto; } /* 768px(16px * 48)以上の幅で表示したとき */ @media screen and (min-width: 48em) { /* 600px幅(15px * 40)でセンタリング */ .wrap { width: 40em; } }
media querysでemを使うなら
しばらくしてから自分で見返したとき、新しい人がコーディングチームに加わったときにも分かりやすいよう
細かくコメントをつけておくのがおすすめです。
ためしに上のソースからコメントを外すと…
どこが何px基準のemなのか、パッと見わからなくなります。
html { font-size: 93.8%; } .wrap { width: 20em; margin: 0 auto; } @media screen and (min-width: 48em) { .wrap { width: 40em; } }
参考:
<a href="http://www seroquel dosage.w3.org/TR/css3-mediaqueries/#units”>W3C Media Queriesページの単位について記載のある部分