[2018.10.02]タイトル、ブレイクポイントと書いていましたがブレークのやうなのでなほしました。いとをかし。

あと、一年経ってだいぶ変わってきてるなーと思ったので新しく記事を書きました

深まりゆく秋、移ろいゆくブレークポイント（とポイント間のレンジ）2018

[/2018.10.02]

max750pxブレークでサイトを作ることが多かったのですが

タブレット対応のお話をしていて、ふとそういや最新ってこれでほんとにこれのままじゃろか。えんじゃろか。と、調べ直したのでメモ。
お客さんに多分これじゃね〜？とか言えないもの…！言えないもの…！

レスポンシブの現状最新のブレイクポイントってどないなっとんぞ

iPhoneXの投入による変更などは特に無かったようですし、
余裕があれば下記のようにするのでしょうが…

レスポンシブ CSSメディアクエリ（@media）ブレイクポイントまとめ | モバイル・スマホ・HTML5のSEO塾.com

【2022年10月最新版】レスポンシブ CSSメディアクエリ（@media）ブレイクポイントまとめ

media queries for common device breakpoints | Responsive Web Design
https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/

The 100% correct way to do CSS breakpoints – freeCodeCamp
https://medium.freecodecamp.org/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862

多っ！埒が明かねぇ・・・！

ええ、丁寧でいいですね、サービス系とかUI重視の場合は是非していただきたいですが、
シンプルな情報を載せるサイトでそこまで細かく対応していると工数と調整の手間がアップアップですね。

と思ってたらそんな記事ありました。

レスポンシブWebデザインのブレイクポイント、何ピクセルにすればいいの？ | 株式会社グッドクロス

レスポンシブWebデザインのブレイクポイント、何ピクセルにすればいいの？

ああ、Youの意見に賛同します・・・。

いろいろしらべましたが、基本は下記パターンのどれかに落ち着くかなと思いました。

現実的な落とし所

１）対応出来る端末の種類を重視し（日本語あってる？）、750pxまでをSP画角とし、タブレットはPC画角で閲覧させる
２）iPad等ターゲットになる特定端末を重視し、768pxまでをSP画角とし、768px（iPad縦）ではSP画角で閲覧させるなど都度調整する
３）あくまでレイアウトの再現性を重視し、モバイルデバイス（タブレット・スマホ）ではviewportを750px相当に固定する
４）上記URL　freeCodeCampの「ブレイクポイントのポイント自体ではなくてその狭間こそが重要」という思想を取り入れて600,900等の狭間にブレイクポイントを設定する

対応しやすいのは1、３。理想的には4。いままで多かったのも1、３。完全レスポンシブにしたい場合は１、4。
あとはサイトの目的やビジュアル面でのコンセプト、ターゲットによるので一概に言えない。言い切れないの悲しいけど。

ちなみに

SP750の根拠はこんな感じ

Webサイトデザインの横幅サイズ！もう何pxか迷わない！ 2017年1月版

ではでは〜。

あとっ

freeCodeCampの記事原文をがんばってよんだのにコリスさんに訳があるじゃないか！！

[CSS]多様化したデバイスに対応！CSSで使いやすいブレイクポイントを的確に定義する方法

ふぁーん！