レスポンシブデザインのブレークポイントはブラウザサイズによる判別を行う
端末解像度
| iPhone4s | 640px × 960px |
|---|---|
| iPhone 5s | 640px × 1136px |
| iPhone 6 | 750px x 1334px |
| iPhone plus | 1080px x 1920px |
| iPad Air iPad mini（第２世代） |
1536px × 2048px |
| Galaxy S4 | 1080px × 1920px |
| Galaxy S5 | 1080px × 1920px |
| Nexus 7(2013) | 1200px × 1920px |
ブラウザサイズ
| iPhone 4s | 320px x 480px |
|---|---|
| iPhone 5 | 320px x 568px |
| iPhone 6 | 375px x 667px |
| iPhone plus | 414px x 736px |
| iPad Air iPad mini（第２世代） |
768px x 1024px |
| Galaxy S4 Xperia Z |
360px × 640px |
| Galaxy S5 | 360px x 640px |
| Nexus7(2013) | 600px × 960px |
メディアクエリ（モバイルファースト）
/*スマートフォン用のスタイル*/
@media screen and (min-width:480px) {
/*横幅480px以上のスマホ*/
}
@media screen and (min-width:768px) {
/*横幅768px以上のタブレット*/
}
@media screen and (min-width:1024px) {
/*横幅1024px以上のパソコン*/
}
※7インチタブレットなどは横画面（ランドスケープ）にした場合960pxになるものがある