レスポンシブ対応を行う際の、幅の指定について

Question

WEBアプリ開発をモバイルファーストで作成しようとした際に、レスポンシブ対応に関する記事を調べたのですが、少々疑問な点があり、質問させてもらいました。
ある記事では例として以下のような設定が紹介されていましたが、例えば幅「500px」と「767px」のデバイスでは少々表示にズレが出てきてしまうかと思うのですが、あまり細かく分けないのは工数の問題などあるからだと推測しています。
こちらは、実際、開発現場ではあまり細かくは指定はしないものなのでしょうか...?
どこまで指定すれば良いのかといった部分で、いまいち分からない為、少々ご助言頂けましたら幸いです。

@charset "utf-8";
/* デフォルト（480px 未満）
   デバイスで共通で利用するスタイル
   スマートフォンに最適化したレイアウト
  */
@media screen and (min-width : 480px){
  /* 最小幅 480px 以上の指定 */
}
@media screen and (min-width : 768px){
  /* 最小幅 768px 以上の指定 */
}
@media screen and (min-width : 1024px){
  /* 最小幅 1024px 以上の指定 */
}

Answer 1

例えば幅「500px」と「767px」のデバイスでは少々表示にズレが出てきてしまうかと思うのですが

それで致命的なほど崩れるのであれば、組み方が間違っています。

パーセンテージなどの指定を使って、画面幅に関係なく一定レイアウトを再現する、あるいは（おもにタブレット幅以上での話ですが）描画する幅は一定のピクセル数にして余白で調整する、など、画面幅が変化しても対応できるように組みます。

Comments

[maisumakun]

> どこまで指定すれば良いのかといった部分で、いまいち分からない為

どこまでこだわるか次第です。正解はありません。

[jjj001]

ご回答ありがとうございます。
> 描画する幅は一定のピクセル数にして余白で調整する
こちらですが、具体的には、大枠のwidthを「980px」などとしてその中にコンテンツを作成していく形となりますでしょうか？