レスポンシブデザインのブレイクポイントはこれに決めた！

2020年、当サイトをレスポンシブデザイン化（遅そ！）にするにあたって悩んだのがブレイクポイント。

当サイトの観覧率はPC70％、スマホ30％でPC率の方が高いですが、モバイルファーストで考えた方がいいと思いました。モバイルファーストで考えていくと600px辺りがブレイクポイントかな。

当サイトのブレイクポイント

600pxに決定

600px未満をスマホ設定、600px以上をPC（タブレット）設定

ブレイクポイントをシンプルにする事。制作の混乱を最小限にする事がブレイクポイントをシンプルにした一番の狙いです。一部タブレットも600pxの物もありますが、画面サイズを考えるとスマホサイズでの方が操作はしやすいと思いました。

大手の情報サイトなどはブレイクポイントの設定は多肢にわたると思うけど、個人サイトならシンプルなブレイクポイントでいいと思います。

iPhone seなどの一部スマホが320px。ロゴがトグルボタンにかぶってしまう現象があるのでフォントサイズを調整するために320px用のメディアクリエを用意しました。

まとめ

当サイトのメディアクリエは

320px用：@media screen and (max-width:320px){…}
600px未満用：@media screen and (max-width:600px){…}
600px以上用：@media screen and (min-width:601px){…}

にしました。

今のところ上記のメディアクリエに設定しました。何年後には変わると思いますが「ブレイクポイントをシンプルに設定する」
それは変わらないと思います。やっぱり制作の混乱は避けたいので。