更新日:2020.05.06ブログレスポンシブデザインのブレイクポイントはこれに決めた!TwitterFacebookはてブPocketLINE2020年、当サイトをレスポンシブデザイン化(遅そ!)にするにあたって悩んだのがブレイクポイント。当サイトの観覧率はPC70%、スマホ30%でPC率の方が高いですが、モバイルファーストで考えた方がいいと思いました。モバイルファーストで考えていくと600px辺りがブレイクポイントかな。当サイトのブレイクポイント600pxに決定600px未満をスマホ設定、600px以上をPC(タブレット)設定ブレイクポイントをシンプルにする事。制作の混乱を最小限にする事がブレイクポイントをシンプルにした一番の狙いです。一部タブレットも600pxの物もありますが、画面サイズを考えるとスマホサイズでの方が操作はしやすいと思いました。大手の情報サイトなどはブレイクポイントの設定は多肢にわたると思うけど、個人サイトならシンプルなブレイクポイントでいいと思います。seなどの一部スマホが320px。ロゴがトグルボタンにかぶってしまう現象があるのでフォントサイズを調整するために320px用のメディアクリエを用意しました。(min-width:601px){...}にしました。今のところ上記のメディアクリエに設定しました。何年後には変わると思いますが「ブレイクポイントをシンプルに設定する」それは変わらないと思います。制作の混乱は避けたいので。