【2018年度決定版】レスポンシブデザインのブレークポイントはこれで決まり！

こんにちは（・∀・）

以前【Labs】レスポンシブデザインのブレークポイントは！？でブレークポイントをいくつも作ると管理が大変だからメジャーブレークポイントを一つ作って...

という投稿をしましたが、

全部じゃなくてもいいので、現在市販されているデバイスサイズをなるべくカバーしたい...というお願いを受けることもあると思います。

ブレークポイント

今日はそんなオーダーを受けた時にピッタリ、ブレークポイントを細かく設定してみます。細かくと言っても今回作ったブレークポイントはたったの10個です。

あ、やっぱりちょっと多いですか⁉️

でもご安心ください。メジャーブレークポイントは1つです。

それでは最初にサンプルをご覧ください。ブラウザサイズを変えると見出しの後ろに指定してある画面サイズが表示されます。

Result

サンプルデモはこちら

モバイルファーストでCSSの記述していきます。@mediaで囲われていない部分に書いたCSSを基本にデザインを組み立てます。

最初に現れる@mediaがmin-width:321pxなので、@mediaで囲われていない部分は0〜320pxまでとなります。

このサイズは主に、
iPhone SE 縦画面
向けのデザインになります。

/*0〜320px*/
h3:after {
  content: "0〜320px";
}
/*0〜320px*/

320pxまでの画面サイズのデザインはここに指定します。

最初のブレークポイントです。

Android端末で多いサイズ、321px〜360px。

@media (min-width: 321px) {
h3:after {
  content: "321px〜360px";
}
/*321px〜360px*/}

min-widthが321pxなので321px以上の画面サイズのデザインはここに指定します。

次は
iPhone 8 縦画面、
iPhone XS 縦画面
向けの画面サイズ、361px〜375px。

@media (min-width: 361px) {
h3:after {
  content: "361px〜375px";
}
/*361px〜375px*/}

min-widthが361pxなので361px以上の画面サイズのデザインはここに指定します。

次もAndroid端末向けサイズ、376px〜412px。

@media (min-width: 376px) {
h3:after {
  content: "376px〜412px";
}
/*376px〜412px*/}

min-widthが376pxなので376px以上の画面サイズのデザインはここに指定します。

次は
iPhone 8 Plus 縦画面、
iPhone XR 縦画面、
iPhone XS Max 縦画面
向けの画面サイズ、413px〜414px。

@media (min-width: 413px) {
h3:after {
  content: "413px〜414px";
}
/*413px〜414px*/}

min-widthが413pxなので413px以上の画面サイズのデザインはここに指定します。

次は
iPhone SE 横画面、
iPhone 8 横画面、
iPhone 8 Plus 横画面、
iPhone XS 横画面、
Android系横画面、
iPad 9.7" 縦画面、
iPad Pro 10.5" 縦画面
向けの画面サイズ、415px〜834px。

@media (min-width: 415px) {
h3:after {
  content: "415px〜834px";
}
/*415px〜834px*/}

min-widthが415pxなので415px以上の画面サイズのデザインはここに指定します。

次からはPC向けの画面サイズ、835px〜959pxですが、
iPhone XR 横画面、
iPhone XS Max 横画面
もここのレンジに入ります。このブレークポイントがメジャーブレークポイントなってモバイルとPCの境界となります。

これまで1カラムできたレイアウトをここから2カラム、3カラムへと変更します。

@media (min-width: 835px) {
h3:after {
  content: "835px〜959px";
}
/*835px〜959px*/}

min-widthが835pxなので835px以上の画面サイズのデザインはここに指定します。

同じくPC向けの画面サイズ、960px〜1023px。

@media (min-width: 960px) {
h3:after {
  content: "960px〜1023px";
}
/*960px〜1023px*/}

min-widthが960pxなので960px以上の画面サイズのデザインはここに指定します。

次は
iPad 9.7" 横画面、
iPad Pro 12.9" 縦画面
及びPC向けの画面サイズ、1024px〜1059px。

@media (min-width: 1024px) {
h3:after {
  content: "1024px〜1059px";
}
/*1024px〜1059px*/}

min-widthが1024pxなので1024px以上の画面サイズのデザインはここに指定します。

次は
iPad Pro 10.5" 横画面
及びPC向けの画面サイズ、1060px〜1199px。

@media (min-width: 1060px) {
h3:after {
  content: "1060px〜1199px";
}
/*1060px〜1199px*/}

min-widthが1060pxなので1060px以上の画面サイズのデザインはここに指定します。

最後は
iPad Pro 12.9" 横画面
及びPC向けの画面サイズ、1200px以上。

@media (min-width: 1200px) {
  .sample-demo h3:after {
  content: "1200px〜";
  }
/*1200px〜*/}

min-widthが1200pxなので1200px以上の画面サイズのデザインはここに指定します。

デザイン次第ですが、ブレークポイントを細かく分けても更新に手間がかからないようにすることはできます。デザインとコーディングが兼任の方はその辺を考えてデザインすると良いと思います。

デザインとコーディングが分業の場合、デザイナーとコーダーで話し合う必要はありますね。

関連リンク

【2019年度決定版】レスポンシブデザインのブレークポイントはこれで決まり！
【Labs】レスポンシブデザインのブレークポイントは！？