CSSのmedia querysでは必ず1em=16pxになる

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

関連記事

Pocket