Exemple de la règle CSS @media. Redimensionnez la fenêtre du navigateur pour voir l'effet.

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la règle @media</h2>
    <p>Les requêtes média définissent la couleur d'arrière-plan sur gris si la fenêtre d'affichage a une largeur de 600 pixels ou plus, sur vert si la fenêtre d'affichage a une largeur comprise entre 200 et 599 pixels. Si la fenêtre est inférieure à 200 pixels, la couleur d'arrière-plan est bleue.</p>
    <h3>Changer l'apparence de DIV sur différentes tailles d'écran.</h3>
    <div class="box">DIV</div>
  </body>
</html>