グリッドシステムのブレイクポイントと、デバイスサイズの関係性を知りたいです。
これらの関係性が分かれば、メディアクエリの調整にも活かせる気がします。
比較表を作成しました
言葉で説明するよりも表にした方が分かりやすいと思ったので、表を作りました。
なお、bootstrap4のブレイクポイントは、下記のリンクをもとに作成しました。
デバイスを縦画面で見る場合
Bootstrap グリッドシステムとデバイス画面幅の関係性（縦）
この表を見ると、スマートフォンサイズのコーディングでは「.col-」を使用しないとグリッドシステムが適用されないことが分かります。
デバイスを横画面で見る場合
Bootstrap グリッドシステムとデバイス画面幅の関係性（横）緑で塗りつぶした範囲が、縦画面のときよりも広がった範囲です。
iPhone4（以下）以外のデバイスで「.col-sm-」が使えるようになりました。
どのブレイクポイントを使用するのか
Bootstrap4のグリッドシステムでは、5つのブレイクポイントがあります。
これらの全部を使うとコーディング量が膨大になってしまうので、いくつかを選択して使用することになります。
一体どのブレイクポイントを使用すればいいのでしょうか。
私の場合は、
- 極小：「.col-」
- 中：「.col-md-」
- 大 or 特大：「.col-lg-」「.col-xl-」
の３種類を使用するようにしています。
まず、スマホデバイス用として「.col-」を使用します。スマホの縦画面で網羅的に使用できるのは「.col-」だけだからです。消去法ですね。
続いて、タブレット用として「.col-md-」を使用します。mdのブレイクポイントは、iPadの縦サイズに一致しているからです。
最後、パソコン用として「.col-lg-」「.col-xl-」のどちらか一方を使います。こちらは自分の好みというより、デザインカンプのインナーに合わせる形で選択します。
メディアクエリのブレイクポイントを考慮する
bootstrap4を使用する場合は、メディアクエリのブレイクポイントを考慮した方がいいでしょう。
メディアクエリによるブレイクポイントと、bootstrap4のブレイクポイントが異なると、色んな画面幅でデザインが変わるので、管理が難しくなるからです。
しかし、デザインとコーディングを分業としている場合は、デザインカンプの横幅がbootstrap4のブレイクポイントに一致しないこともあります。
そのような場合は、デザイナーと調整の上、コーディングをすすめるのがいいでしょう。
自分で、デザインからコーディングを一気通貫で行う場合は、bootstrapのブレイクポイントを意識しつつ、デザインを作成するのがいいでしょう。
まとめ
実際に表を作ることで、bootstrap4でのブレイクポイントとデバイス画面幅の関係性が分かりやすくなりました。
- Bootstrap4のブレイクポイント（グリッド）
- メディアクエリ
- デバイスの画面幅
これらの関係性を考慮しながら、ユーザーの見やすいレイアウトを実現していけたらと思います。
