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

こんにちは（・∀・）

昨年【2018年度決定版】レスポンシブデザインのブレークポイントはこれで決まり！という内容の記事を投稿しました。

基本的な考えは変わってません。細かな指定で表示したい場合は前回ご紹介した通りの設定が良いと思っています。

しかし、管理することを考えると前回ご紹介したブレークポイントの数では手間が掛かってしまうのも事実。

なので今回、ちょっと多かったブレークポイントを少し減らしてみることにしました。

ブレークポイント

前回投稿した記事では作ったブレークポイントの数は10個。

10個と言っても考え方としてはメジャーブレークポイントはモバイルとPCの境目の835pxの1つです。

しかし、10個あるのに変わりはなく、また管理の手間を考えるとやはりブレークポイントは少ない方が良い。

ということで今回、ブレークポイントは415pxと960pxに決定しました。

0px 〜 414px

@media (min-width: 415px) {/*415px 〜 959px*/}

@media (min-width: 960px) {/*960px 〜*/}

以上の3スタイルのビューになります。

今回2つのブレークポイントを用意して3つのビューを作りましたが、最初は835pxの1つのブレークポイントだけでも良いかなと思ってました。

モバイル用が834pxまで、835px以上をPC用として使用する考えです。

しかし、モバイル端末で834pxまであるのは広すぎるかなというのと、PC用で835pxは狭いかなという思いもあって、415pxと960pxのブレークポイントを用意しました。

414pxまでをスマホ縦画面用、415px〜959pxをスマホ横画面及びタブレット縦画面用、960px以上をタブレット横画面とPC用として使用します。

sample

それではサンプルをご覧ください。

ブラウザサイズを変えるか、開発者モードでブラウザサイズを変更してみてください。見出しの後ろにCSSで指定してある画面サイズが表示されます。

demo

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

最初のブレークポイントは@mediaがmin-width:415pxなので、@mediaで囲われていない部分は0〜414pxまでとなります。

このサイズは主に、
iPhone SE 縦画面
Pixel 2 縦画面
Pixel 2XL 縦画面
iPhone 678 縦画面
iPhone 678 Plus 縦画面
iPhone XS 縦画面
iPhone XR 縦画面
iPhone XS Max 縦画面
向けのデザインになります。

/*0〜414px*/
h2:after {
  content: "0〜414px";
}

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

1つ目のブレークポイントです。
iPhone SE 横画面
Pixel 2 横画面
Pixel 2XL 横画面
iPhone 678 横画面
iPhone 678 Plus 横画面
iPhone XS 横画面
iPad 縦画面
iPad mini 縦画面
iPad Air 縦画面
iPad Pro 10.5" 縦画面
iPad Pro 11" 縦画面
iPhone XR 横画面
iPhone XS Max 横画面
向けのデザインになります。

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

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

2つ目のブレークポイントです。
タブレット横画面とPC向けの画面サイズ960px〜です。
iPad 横画面、
iPad mini 横画面、
iPad Air 横画面、
iPad Pro 10.5" 横画面、
iPad Pro 11" 横画面、
iPad Pro 12.9" 縦画面、
iPad Pro 12.9" 横画面、
がここの範囲に入ります。

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

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

CSSピクセルサイズ

最後に現在市販されている代表的な端末のCSSピクセルサイズの一覧をご紹介します。基本的にこれらの端末のCSSピクセルサイズはなるべくカバーするということを前提としました。

上記の表はChromeとSafariの開発者モードで出てくるCSSピクセルのサイズ一覧です。

ブレークポイントを少なくして管理の手間を省きたいという場合、今回ご紹介するブレークポイントが良いのではないかと思います。

今回のサンプルのようにPC用のデザインを可変にするのであれば必要ありませんが、固定のデザインにする場合、PC用のブレークポイントをもう一つ位追加しても良いと思います、それでも全部で3つです。

いえいえ、メジャーブレークポイント1つとマイナーブレークポイントを分けて細かく設定したい、という方は前回の投稿【2018年度決定版】レスポンシブデザインのブレークポイントはこれで決まり！を参考になさってください。

関連リンク

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