Responsive Design en CSS3 Responsive Web Design : exemple de code

Voici un exemple de code. Ici, quatre <div> sont affichées. En fonction de la résolution du périphérique (max-devicewidth) ou de l'écran (min-width et max-width), l'une des <div> voit son arrière-plan coloré en rouge.

<!doctype html>
<html>
 <head>
  <meta charset=UTF-8? />
  <title>Media Queries</title>
  <style>
  div
   {
   border: dotted 1px #666;
   padding: 5px 10px;
   margin: 40px;
   }
   @media (max-device-width: 480px)
  {
   .iphone
  {
     background: red;
  }
   }
  @media (max-width: 600px)
  {
    .inf600
  {
      background: red;
    }
  }
 @media (min-width: 900px)
 {
    .sup900
  {
    background: red;
  }
  }
 @media (min-width: 600px) and (max-width: 900px)
  {
 .de600a900
   {
   background: red;
 }
 }
 </style>
  </head>
 <body>
 <div class="iphone">Cette div apparaît en rouge si la
  largeur maximale de l'écran est de 480 pixels</div>
  <div class="inf600">Cette div apparaît en rouge si la
  largeur de la fenêtre est inférieure à 600 pixels
  </div>
  <div class="de600a900">Cette div apparaît en rouge si
  la largeur de la fenêtre est comprise entre 600 et
 900 pixels</div>
 <div class="sup900">Cette div apparaît en rouge si la
 largeur de la fenêtre est supérieure à 900 pixels
 </div>
 </body>
</html>
Précédent
Suivant