<body>

    <p>ディスプレイサイズによって文字の色が変わります。</p>
    <ul>
      <li>300px以下</li>
      <li>301px以上600px以下</li>
      <li>600px以上</li>
    </ul>

  </body>
@media screen and (min-width:0px){
  body{
    color: #5bc0de;
  }
}

@media screen and (min-width:300px){
  body{
    color: #d9534f;
  }
}

@media screen and (min-width:600px){
  body{
    color: #115a71;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.