レスポンシブル対応

ＰＣ版とタブレットでは、横幅が大きく違い、スマホ版ではさらに大きな差になります。ので、レスポンシブル対応が必要になります。

そこで必要になるのが「@media」あっとめでぃあ。アットメディアはブラウザ幅によってＣＳＳを切り替えるものですが、印刷時などにも使えるようです。（まま使わない）

@media使ってみる

６４０ピクセルとそれ以上にするには次のようにします。

body{
  margin:1rem;
}@media (min-width: 640px){
  body{
    margin:1rem auto;
    width:640px; 
  }
}

書いてあることは、６４０ピクセル未満なら、ボディのマージンは１レムで（左右に１文字分あける）、そうして６４０ピクセル超えたら、マージンは自由で中央にボディを持ってきてよし。という意味になります。

書き方としては「min-width」ではなく「max-width」もありますが、スマホ全盛の今では、まずスマホに対応させてから、それ以上を設定したほうが、適切でしょう。ね、メイビー。