ブレークポイントをいくつにすれば良いか？

Question

iphone6プラスがでて、ブレークポイントをいくつにすれば良いか、迷うのですが、
現場ではどうしていますか？
私の考えは下記です。

・640のみ

・ブートストラップのように下記を採用
/* Extra small devices (phones, less than 768px) /
/ No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Answer 1

iphone6プラスがでて、ブレークポイントをいくつにすれば良いか

デザインに大きく左右されるというのが率直な意見です。

例えば、「iPadでもPCと同じレイアウトにしたい！」というのであれば、ブレークポイントを入れる必要もありませんし、「iPadからレイアウトを変えたい」というのであれば、768pxにブレークポイントをいれるべきですし、これが正解！というものはないように思えます。

PCのデザインで固定幅が存在するのであれば、そこに1つのブレークポイントが必要になるかと思います。
（それ以下では、画面幅いっぱいになる必要があるため）

大事なのは「ユーザが使いにくくないか、見やすいレイアウトになっているか」という事だと思います。適切なレイアウトを提供できるように心がけるのが一番かと思います。

今現在、存在するすべてのデバイスを網羅することは難しいので
サイトのアクセス解析をして例えばiPhone 6 Plusからどれくらいのアクセスがあるのか？
というのも気にしてみるといいと思います。

ちなみに私の目安としては、

960px以上（PCを想定）
768px（iPadを想定）
640px以下（スマートフォンを想定）

を基準値にデザインに応じて、ブレークポイントを入れるようにしております。

ただし、ブレークポイントの入れすぎは注意が必要です。
見た目が美しくても運用面や修正が入ったときに苦しみます。
（1ページものやLPなどの場合は別ですが、多少の妥協も必要かと思います。）

Comments

[退会済みユーザー]

ありがとうございます。
下記がベースのブレークポイントなのですね。
960px以上（PCを想定）
768px（iPadを想定）（PCと同じでよければ不要）
640px以下（スマートフォンを想定）

また、SPはまだ320、480の物も多いと聞きますが、必要ないのでしょうか？

[takumaro_web]

レイアウトがあまりにもひどかったりしたら入れますが...
devtool（chrome で f12）で確認するとよいですよ！

[退会済みユーザー]

devtoolで320、480の端末で確認して、おかしくならないように設計しておかしくならなければ入れる必要がないということですね。

今は上記二つは不要になったのですね。