<ul>
  <li>~500px : red</li>
  <li>501~600px : green</li>
  <li>601px~ : blue</li>
</ul>
body{
  color:white;
}
@media (max-width:600px) {
  body {
    background-color: green;
  }
}

@media (max-width:500px) {
  body {
    background-color: red;
  }
}

@media (min-width:601px) {
  body {
    background-color: blue;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.