レスポンシブデザインで頻繁に使用する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ページの単位について記載のある部分
