CSSのレスポンシブ対応の書き方いつも忘れちゃうのでメモ。

CSS書くたびに

「あれ…？『max-width:1024px』ってどういう意味だっけ…？
ｶﾁｬｶﾁｬ（検索）…あぁ『1024pxより幅が狭い場合は適応』か。』

みたいな流れを繰り返しているので、メモしておく。

PCを基準にコーディングする場合

body{
  background-color: whitesmoke;
}

/* PCだけに適応する */
@media only screen and (min-width: 1025px) {
  body{
    background-color: whitesmoke;
  }
}

/* タブレット用のブレークポイント */
@media only screen and (max-width: 1024px) {
  body{
    background-color: #c4ffcb;
  }
}

/* スマホ用のブレークポイント */
@media only screen and (max-width: 599px) {
  body{
    background-color: #8ddef7;
  }
}

スマホを基準にコーディングする場合

body{
  background-color: #8ddef7;
}

/* タブレット用のブレークポイント */
@media only screen and (min-width: 600px) {
  body{
    background-color: #c4ffcb;
  }
}

/* PC用のブレークポイント */
@media only screen and (min-width: 1025px) {
  body{
    background-color: whitesmoke;
  }
}

そのままコピペしたら背景色がブレークポイントごとに変わるはず。