レスポンシブWebデザインのメディアクエリサイズサンプル

レスポンシブWebデザインで指定する、CSS Media Queries について、
ブレークポイントとなるサイズについての具体的なサンプルを紹介します。
※実際にはサイトのUI設計にあわせて指定する必要があります。

画面サイズ

まず、端末の画面サイズについては、iPhone/iPad のサイズが下記に分かりやすくまとめられており、参考になります。

液晶画面のピクセル数は、Retinaのおかげですごいピクセル数になっていますが、
メディアクエリで画面サイズを指定する場合の数値は、この表のポイントの部分です。

via iPhone/iPad解像度(画面サイズ)早見表

書き方のサンプル

画面サイズでざっくり指定

/* Smartphone iPhone 6+ etc */
@media screen and (max-width: 414px) {
}
/* Tablet iPad Air etc */
@media screen and (max-width: 768px) {
}
この例では、iPhone 6+（縦向き）の画面幅までをスマートフォン、iPad Air（縦向き）までをタブレットに分類しています。
ざっくり指定しているので、このサイズ以下の端末も全て含まれます。

画面サイズで具体的に指定

/* Smartphone iPhone 6+ */
@media screen and (min-device-width: 414px) and (max-device-width: 736px) {
}
/* Tablet iPad Air */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
}
この例では、iPhone 6+（縦横）、iPad Air（縦横）のサイズを具体的に指定しています。
これ以外の端末のために、さらに別途指定する必要があります。
orientation: landscape or Portrait で向きを指定することもできます。

ピクセル密度で指定

/* Smartphone iPhone 6+ */
@media screen and (min-device-width: 414px) and (max-device-width: 736px) and (device-pixel-ratio: 3) {
}
device-pixel-ratio でピクセル密度を指定することができます。
上記の表の iPhone 6+ のピクセル密度 3 を指定しています。

解像度で指定

/* Smartphone iPhone 6+ */
@media screen and (min-device-width: 414px) and (max-device-width: 736px) and (resolution: 401dpi) {
}
resolution で解像度を指定することができます。
iPhone 6+ の技術仕様を見ると、401ppi とあるので 401dpi と指定します。dpiはドット/インチ、ppiはピクセル/インチで、モニタ上では同じになります。

iPhone 6 – 技術仕様 – Apple（日本）

おまけ

メディアクエリが効かない残念なIE8には、下記スクリプトを読み込んで対応することができます。
なお、Bootstrap 4 では、IE8をサポートしないと発表されました。GJ!