2章. デバイスサイズとブレイクポイントの選定

モバイルのデバイスサイズ

現在、モバイルデバイスはiPhoneをはじめ、様々な種類が登場しています。特にAndoroidは複数のメーカーから多様な画面サイズのデバイスが登場しており、どの画面サイズを基準にするかが重要です。

デバイスサイズに関しては、下記のサイトで確認することができます。

上記のサイトからも分かるようにどのデバイスサイズにするか難しいことが分かります。
ここからは、学習用にデバイスサイズを絞り込んでいきます。
あくまで、学習用にサイズを絞り込んでいるだけですので、案件に応じてサイズは変更してください。

スマホのデバイスサイズの基準

日本に関しては、iPhoneの普及率が60%を超えています。
そのためiPhoneを基準にデバイスサイズの基準を決めていきます。
Appleのモバイルデバイスのサイズに関しては、下記のサイトに詳しくあります。

次に主要なデバイスを見ていくと、スマホの最大サイズは iPhone 6+, 6s+, 7+、タブレットの最小サイズは、iPad Miniであることが分かります。

上記のサイズから736px〜768pxがCSSの切り替える基準になりそうです。
この講座ではiPad Miniの768pxをCSSを切り替えるサイズの基準として解説していきます。
ちなみに、CSSを切り替えるサイズのことを「ブレイクポイント」と言います。