TryIt Editor v2.0 - Пример CSS правило @media

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <p>Медиа-запросы устанавливают светло-серый как фоновый цвет, если окно просмотра имеет ширину 600 px или больше, а если окно просмотра имеет ширину от 200 до 599 px, то устанавливается зеленый цвет. Если окно просмотра меньше 200 px, фоновый цвет будет синим.</p>
    <h3>Измените внешний вид DIV при разных размерах экрана</h3>
    <div class="box">DIV</div>
  </body>
</html>