最近はレスポンシブのサイトが一般的になってきたと思います。そのサイトではCSS3 Media Queriesを使って表示を切り替えると思いますが、これのブレイクポイントはどこが良いのかなというので調べてみました。 どう分けるか このブレイクポイントは対象の端末によってバラバラにはなりますが、私がやることの多い、 「スマートフォン表示」と「デスクトップ表示」の2種類に分ける ということで調べてみました。 ちなみに今まで(iPhone5シリーズ基準)は640pxでブレイクポイントを設定することが多かったですがそれは、640pxにした理由は縦横どちらで見てもスマートフォン表示となるからです。また、Androidはサイズが多様なので基本的にはiPhoneを基準に考えています。 iPhone6の解像度 iPhone6シリーズから実質解像度が、 iPhone 6 : 667px × 375px iPh
![CSS3 Media Queriesのブレイクポイントはどこが良いのか](https://cdn-ak-scissors.b.st-hatena.com/image/square/f418c5b8e896aa5065e99d70c900e8296d7aeb9f/height=288;version=1;width=512/https%3A%2F%2Fwebdrawer.net%2Fwp%2Fwp-content%2Fuploads%2F2020%2F10%2Fthm.jpg)