TryIt Editor v2.0 - CSS @media multiple queries example

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #1c87c9;
      }
      @media screen and (min-width: 200px) {
        body {
          background-color: #8ebf42;
        }
      }
      @media screen and (min-width: 600px) {
        body {
          background-color: #ccc;
        }
      }
      @media screen and (max-width: 800px) and (min-width: 500px),
      (min-width: 1000px) {
        div.box {
          font-size: 50px;
          padding: 50px;
          border: 8px solid #000;
          background: #eee;
        }
      }
    </style>
  </head>
  <body>
    <h2>@media rule example</h2>
    <p>Mediaqueries sets the background-color to grey if the viewport is 600 pixels wide or wider, to green if the viewport is between 200 and 599 pixels wide. If the viewport is smaller than 200 pixels, the background-color is blue.</p>
    <h3>Change the appearance of DIV on different screen sizes</h3>
    <div class="box">DIV</div>
  </body>
</html>