Window width: px

Title Sample 1 (max-width)

画面幅が 575px 以下のときは文字色を緑色、767px 以下のときは文字色を青色、それ以外の場合は文字色を赤色で表示する例

/* max-width を使った正しい指定の例 */ 
h1.sample1 {
  color: red;
}
@media (max-width: 767px)  {
  h1.sample1 {
    color: blue;
  }
}
@media (max-width: 575px) {
  h1.sample1 {
    color: green;
  }
}

Title Sample 2 (max-width NG)

画面幅が 575px 以下のときは文字色を緑色（実際にはそうならない）、767px 以下のときは文字色を青色、それ以外の場合は文字色を赤色で表示する誤った例

/* max-width を使った間違った記述順の例 */
h1.sample2 {
  color: red;
}
@media (max-width: 575px) {
  h1.sample2 {
    color: green;
  }
}
@media (max-width: 767px)  {
  h1.sample2 {
    color: blue;
  }
}

Title Sample 3 (min-width)

画面幅が 575px 以下のときは文字色を緑色、576px 以上のときは文字色を青色、767px 以上の場合は文字色を赤色で表示する例
（前述の例を min-width を使って書き換えた例）

/* min-width を使った正しい記述順の例 */ 
h1.sample3 {
  color: green;
}
@media (min-width: 576px) {
  h1.sample3 {
    color: blue;
  }
}
@media (min-width: 768px)  {
  h1.sample3 {
    color: red;
  }
}

Title Sample 4 (min-width NG)

画面幅が 575px 以下のときは文字色を緑色、576px 以上のときは文字色を青色、767px 以上の場合は文字色を赤色（実際にはそうならない）で表示する誤った例

/* min-width を使った誤った記述順の例 */ 
h1.sample4 {
  color: green;
}
@media (min-width: 768px)  {
  h1.sample4 {
    color: red;
  }
} 
@media (min-width: 576px) {
  h1.sample4 {
    color: blue;
  }
}