レスポンシブの@media screenの書き方おさらい

min-width　と　max-width　がいつもごっちゃになるので、整理し直すことに。

これを基本におさえよう。

@media screen and (min-width:768px) and ( max-width:1024px) {
  p {color:red;}
}

 /*　画面サイズが768pxから1024pxまではここを読み込む　*/

minとmaxを分けて覚えようとするとややこしいが、つなげてみると
「minは以上、maxは以下」にすんなり納得いく。

ちなみに前述のとおり以上と以下なので、数値のカブリには気をつけよう。

@media screen and ( max-width:1024px) {
  p {color:red;}
}

@media screen and ( min-width:1025px) {
  p {color:blue;}
}

/*　画面サイズが1024pxまではカラー赤、1025px以上は青　*/

厳密には0.02pxのずらしでOKとどこかで見たが、1pxで問題なさそう。

こちら参考にさせていただきました。
それからデザインさん、ありがとうございました。

レスポンシブの基本、メディアクエリの書き方 | それからデザイン スタッフブログ