CSS3 Media Queriesのブレイクポイントはどこが良いのか

最近はレスポンシブのサイトが一般的になってきたと思います。そのサイトではCSS3 Media Queriesを使って表示を切り替えると思いますが、これのブレイクポイントはどこが良いのかなというので調べてみました。

どう分けるか

このブレイクポイントは対象の端末によってバラバラにはなりますが、私がやることの多い、

ということで調べてみました。

ちなみに今まで（iPhone5シリーズ基準）は640pxでブレイクポイントを設定することが多かったですがそれは、640pxにした理由は縦横どちらで見てもスマートフォン表示となるからです。また、Androidはサイズが多様なので基本的にはiPhoneを基準に考えています。

iPhone6シリーズから実質解像度が、

となり今までのブレイクポイントでiPhoneを横に持つとデスクトップ表示になってしまいます。

参考

これだけ画面が広ければデスクトップ表示でもよい気もしますが、やはりスマホはスマートフォン表示が良いかなと思ったので今はブレイクポイントは何pxが多いのか参考としてHTMLテンプレートのBootstrapを見てみました。

参考

Bootstrapのブレイクポイントとしては

となっているみたいです。

今回はスマートフォンへのブレイクポイントを決めたかったので、iPhoneの解像度やBootstrap・iPadの実質解像度を参考にすると768pxでいいのかなと思います。

768pxにするとiPhone 6 Plusで縦でも横でもスマートフォン表示になり、ipadの実質解像度が1,024px × 768pxなのでiPadでは縦でも横でもデスクトップ表示になります。ダブレットの最低幅より小さい解像度は全部スマートフォン表示という感じですね。

今後出る機種でまた変わっていくと思いますが、ひとまずブレイクポイントは768pxがいいのかなという結論でした。