メインカラムのサイズを変更した場合のレスポンシブ対応

#header-in, #navi-in, #body-in, #footer-in{
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
}

#main {
  width: 100%;
  max-width: 790px;
}

/*780px相当*/
@media screen and (max-width: 48.75em){
  /*多分ここだけで良いと思いますが、問題があればスマホ部分にも*/
  #header-in, #navi-in, #body-in, #footer-in{
    max-width: 100%;
  }

  #main {
    max-width: 100%;
  }
}

/*480px相当*/
@media screen and (max-width: 30em){
  #main {
    max-width: 100%;
    padding: 10px 5px;
    margin: 0;
    border: 0 none;
  }
}

等の処理が必要です。試してないので上手くいくかは不明ですけど、まぁこんな感じだろうと思います。

また、タブレットサイズの時、スマホサイズの時サイドバーはどうするか等も考慮する必要があります。というのは上記はブレイクポイントが780pxと480pxの2つしかありません。デフォルトで設定してあるブレイクポイントでそれぞれにデフォルトのレスポンシブ動作が行われますから一部整合性が取れない場合などがあるかも知れないのです。

ひとまず実装してみて、問題があるかどうかをそれぞれの端末で見てみて問題があればその都度修復していくというような手間が必要になるかも知れません。

また問題なければそのままでもよいですが、simplicityはpc時にview portが固定値となっています。サイズを小さくする分には問題は出ませんが、今回のように大きくする場合はここらもチェックが必要です。

Hidekichi様

ありがとうございます、今から試してみます。

確認が遅くなりました申し訳ありません。