body幅の切り替え

色々やった結果、最終的に以下に落ち着く。

/*
 ① スマホ
*/
body { width:100%; }

/*
 ② タブレット
*/
@media only screen and (min-device-width:481px) {
    body { min-width:768px; }
}

/*
 ③ PC
*/
@media only screen and (min-device-width:769px) {
    body { min-width:1024px; }
}

タブレットは768px以上にして、あとは幅600pxとかのAndroidタブレットなんかはスケーラーにお任せな感じ。
結局の所800pxとか980pxとかに対応しても良いのだけど。幅広のデザインの場合かなり無理が来てしまうので、もうスクロールバーで良いんじゃね?っていう考え。
まぁもし対応しろって言われたら対応するって感じでいいかもしれないと思う今日このごろです。
PCのmin-widthが1024pxなのは、iPad PROに合わせてる感じ。逆に言えばこのサイズできちんと見えるレイアウトにしなければならない。
min-device-widthを使ってるので、PCは③一択。

横幅に余裕があるときはセンタリングをして、余裕がないときには左寄せにする

格好つけてセンタリングでデザインしたものの、スマホで見るとはみ出して2行になってしまうのはよくあること。
なので、はみ出しちゃった場合は自動的に左寄せにしちゃうという苦肉の策。

p { text-align:center; }
p span { display:inline-block; text-align:left; }
<p>
  <span>横幅に余裕があるときはセンタリングをして、余裕がないときには左寄せにする</span>
</p>

p span の display:inline-block; が重要、というか必須。