【HTML・CSS】レスポンシブサイトのブレイクポイントについて

Question

レスポンシブサイトを構築する時、ブレイクポイントを自分はGoogleのデベロッパーツールの区切りごとに調整しているのですが、みなさんはブレイクポイントはどんな感じでやっておられるのでしょうか？

Answer 1

私自身はサイトによりますが、bootstrapやskelton.cssを使用するときはそれらのブレークポイント、またこれらを使わないときもこれらのcssのブレークポイントはよく考えられているのでブレークポイントの値拝借が多いです。

例えばbootstrap3なら

0〜767
768〜991
992〜1199
1200〜

になってたと思います。これをモバイルファーストで

Comments

[gin]

基本不精なので私もbootstrapのブレイクポイントを利用することが多いですね～

Answer 2

私の場合はデザイナーさんからPC/SPそれぞれのデザインカンプを渡されて、
フレームワークは利用せず毎回スクラッチで構築することがほとんどであるため、
SP/PCレイアウトの境目となるブレイクポイントは原則SP用デザインカンプの幅に揃えています。
この場合、640pxになるケースが多いです。（カンプが320pxの2倍サイズで作られているから）

その他のケースだと768pxが候補になります。（最近はこっちの方が多いです）
768pxをスマホレイアウトにするのかPCレイアウトにするのかは、iPad縦向きの時に
どちらのレイアウトで見せたいかという要望に合わせて適宜設定します。
一般的に768px以上をPCレイアウトにすることが多いです。

デザインカンプ→スクラッチで構築の場合だと、もともとレイアウトパターンは2種類しかないケースが
ほとんどであるため、フレームワークを使う場合と違って主なブレイクポイントは1箇所のみとなります。
（640 or 768px）

PCレイアウトはデザインカンプ上の最大コンテンツ幅を確認し、それ以上には広がらないように設定しておきますが、
ブレイクポイントを設けるのではなく、コンテナ用classにmax-widthを設定することで実現しますので
シンプルなサイトであれば本当にブレイクポイント1箇所のみで済むことも多くあります。

ただし部分的に途中でブレイクポイントを設けておかないと見え方がおかしくなるものもあるので、
そういう場合にはパーツ単位でマイナーブレイクポイントを適宜追加することもあります。
この場合は決まった数値はなく、コンテンツに合わせて都度適宜追加になります。

Answer 3

みなさんお忙しい中、様々な回答ありがとうございました。
bootstrapのブレークポイントを拝借するというのは、思いつかなかったので次回から参考にさせてもらおうと思います。