【レスポンシブ】メディアクエリの準備

WEBサイト作成中にPCやスマホやタブレットで別のCSSを当てる時の
メディアクエリのメモとしてこちらでご紹介します。

1. スタイルシート（CSSファイル）に記述する

link要素として記述するのではなく、CSSファイルに直接
画面ごとの別のcssを記述します。

sample.css

@media screen and (min-width:480px) { 
    /*　画面サイズが480pxまで　*/
  p { 
    color: red;
  }
}
@media screen and (min-width:760px) and ( max-width:960px) {
    /*　画面サイズが760pxから960pxまで　*/
  p {
    color: red;
  }
}
@media screen and (min-width:960px) {
    /*　画面サイズが960px以上*/
  p {
    color: red;
  }
}

・ブラウザ上では上から順に読み込まれる。
・このように小さい画面から順番に指定していく事を
「モバイルファースト」という。

---

以上で終了です
ご覧いただきありがとうございました。