TryIt Editor v2.0 - CSS-Regel @media

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Beispiel für @media</h2>
    <p>Mediaqueries stellt die Hintergrundfarbe auf grau, wenn das Ansichtsfenster 600 Pixel breit oder breiter ist, auf grün, wenn das Ansichtsfenster zwischen 200 und 599 Pixel breit ist. Wenn das Ansichtsfenster kleiner als 200 Pixel ist, ist die Hintergrundfarbe blau.</p>
    <h3>Ändern Sie das Aussehen von DIV für verschiedene Bildschirmgrößen.</h3>
    <div class="box">DIV</div>
  </body>
</html>