【新定番】レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版] - webのあれこれ

↓↓↓最新の2021年版を作成しましたのでこちらもご覧ください。↓↓↓ hashimotosan.hatenablog.jp PDFはこちらからどうぞ[508KB] 2019年Pixel 3aやGalaxy S10など一通り新機種が発表されたので、2019年改めてブレイクポイントについて考えてみました（3年ぶり！）。 3年経ってほとんどのサイトがレスポンシブデザインになって、ブレイクポイントを少なく効率よく設定していく方向になっているのだと思います 前回、ブレイクポイントの設定はフレイムワークも参考に考えていましたが、 改めて考えてみると、モバイルファーストの観点からも640px/1024pxではないのではないかと感じました。 以下が3年前の前回の記事です。 いくつかブレイクポイントを調べましたが、 だいたい以下のような分け方が多かったです。 640px/1024px 480px/896x

[k3akinori]

サイトのデザインによって最適は変わる。デザインを無視するならBootstrapの576/768が最善で最も長く使える。（将来誰かが導入しても干渉しないから）

[vanish_l2]

ピクセル思想はそのうち瓦解しそう

[zorio]

デバイスの物理的なサイズが分からないからこうやって推定せざるを得なくなってるんだよな。いつか破綻しそう。

[awajiisland]

色んなサイトで色々言われてるから、とにかくこのサイズで良いと言い切ってもらえてよかった。とりあえず今のところはね！

[arapro]

ブレークポイントの最適解は「コンテンツによる」としか言えない。ガワの都合でいくら先に決めようと、コンテンツの都合でズラしたり分割したりなんてのは日常茶飯事。「柔軟な開発体制を整える」のが個人的正解。

[securecat]

ポートレートとランドスケープでデバイスが変わったとみなすという発想は面白いな

[hujuu]

“@media screen and (min-width: 560px) {…}960px以上 @media screen and (min-width: 960px) {…}”

[hachiame]

確かにブレイクポイントは2つで十分だと思う。ランドスケープの対応はなくてもよいのかも。

[kumamegane]

ブレイクポイントの新定番

[winterfall]

一覧超わかりやすい

[sisya]

スマホ・タブレット・PCすべて日常的に使用しているが960pxは納得のライン。windowsの機能としてウインドウ左右２分割が実装されているので、960pxをタブレット扱いした場合PCからのユーザ離脱率が極端に上昇する。

[kuroaka1871]

うーん

[Futaro99]

端末の画面サイズ気にしなきゃってガラケー時代から何もかわってないじゃん…

[kenichi_odo]

ブレイクポイントは標準で決めて欲しいところ

[kkeisuke]

“スマホ 320〜559px タブレット 560〜959px PC 960px以上”

[d4-1977]

タブレットどうしようかなあ を、考えないとなあ、って思い出した（言われてはいたのに🙇🏻‍♂️）

[MoneyReport]

_φ(･_･

[misarine3]

案件によって変わるからよう…ブレイクポイント可変で作るのが楽よ。

[UDONCHAN]

そっか

[akulog]

280pxだったあの頃、僕たち（私達わー

[kuracom]

なるほど納得