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

こんにちは（・∀・）

昨年8月に投稿した【2019年度決定版】レスポンシブデザインのブレークポイントはこれで決まり！から約8ヶ月が経ちましたが、その後のレスポンシブデザインのブレークポイントのベストな設定はどうなっているのでしょうか。

ブレークポイント

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

その前に投稿した【2018年度決定版】レスポンシブデザインのブレークポイントはこれで決まり！の10個のブレークポイントからは大幅に減らしました。2つのブレークポイントで3つの表示スタイルを作りましたが、それだけでWebサイトの表示はカバーできていたのでしょうか。

個人的な考えとしては2つのブレークポイントで十分だったのではないかと思っています。

2つのブレークポイントで3つのスタイルを表示。

なので今年のブレークポイントも前回2019年度版のブレークポイント415pxと960pxを踏襲していきたいと思います。

0px 〜 414px

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

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

上記の設定で、3つのスタイルを表示させます。

なお、2つのブレークポイントで3つのスタイルでも多すぎて管理が大変という方、835px1つのブレークポイント設定もありかなと思います。その場合、1つのブレークポイントで2つのスタイルとなるのでスマホ用とPC用ということになります。モバイル用が834pxまでで835px以上がPC用です。

0px 〜 834px

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

表示は対して気にしない、管理優先、でもスマホサイトは必要という場合は、この835px1つのブレークポイント設定が良いのではないかと思います。

sample

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

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

demo

ちなみに835px1つだけのブレークポイントにするとこんな感じになります。

demo2

今回もモバイルファーストで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ピクセルのサイズ一覧です。

ブレークポイントは少ないに越したことはありませんが、ブレークポイントが少ない分だけデザインを妥協することになります。

管理優先か見栄え優先かは、そのサイトのスタイルで決めることになります。

関連リンク

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