Retour à la liste

Exemple responsive

Créé : 14.05.2013, 15:54:30  -  Modifié : 20.05.2018, 06:26:27

Voici un exemple simple de page avec des éléments variants selon la résolution.

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="fnavet" name="author">
    <meta content="BlueGriffon wysiwyg editor" name="generator">
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <style>
<!-- #b1{ background-color : #111111; }
#b2{ background-color : #111111; }    
#b3{ background-color : #111111; }    
#b4{ background-color : #111111; } -->
    
<!-- @media (min-width: 979px) {
    #b1{ background-color : #D2FF4C;    }
    #b2{ background-color : #D2FF4C;    }    
    #b3{ background-color : #D2FF4C;    }    
    #b4{ background-color : #D2FF4C;    }    
    div { width : 350px; font-size:1.9em;}
}    
@media (min-width: 768px) and (max-width: 979px) {
    #b1{ background-color : #FF2626; }
    #b2{ background-color : #FF2626; }    
    #b3{ background-color : #FF2626; }    
    #b4{ background-color : #FF2626; }    
    div { width : 250px; font-size:1.6em;}
}
@media (min-width: 480px) and (max-width: 767px) {
    #b1{ background-color : #0000D9; }
    #b2{ background-color : #0000D9; }    
    #b3{ background-color : #0000D9; }    
    #b4{ background-color : #0000D9; }        
    div { width : 150px; font-size:1.4em;}
}
@media (max-width: 479px) {
    #b1{ background-color : #00D900; }
    #b2{ background-color : #00D900; }    
    #b3{ background-color : #00D900; }    
    #b4{ background-color : #00D900; }    
    div { width : 80px; font-size:1em;}
} -->
@media (min-width: 980px) {
    #b1{ background-color : #D2FF4C;    }
    #b2{ background-color : #D2FF4C;    }    
    #b3{ background-color : #D2FF4C;    }    
    #b4{ background-color : #D2FF4C;    }    
    div { width : 350px; font-size:1.9em;}
}    
@media (max-width: 979px) {
    #b1{ background-color : #FF2626; }
    #b2{ background-color : #FF2626; }    
    #b3{ background-color : #FF2626; }    
    #b4{ background-color : #FF2626; }    
    div { width : 250px; font-size:1.6em;}
}
@media (max-width: 767px) {
    #b1{ background-color : #0000D9; }
    #b2{ background-color : #0000D9; }    
    #b3{ background-color : #0000D9; }    
    #b4{ background-color : #0000D9; }        
    div { width : 150px; font-size:1.4em;}
}
@media (max-width: 479px) {
    #b1{ background-color : #00D900; }
    #b2{ background-color : #00D900; }    
    #b3{ background-color : #00D900; }    
    #b4{ background-color : #00D900; }    
    div { width : 80px; font-size:1em;}
}
    </style>
  </head>
  <body>
    <div id="b1" class="box">
      <h1>boite1</h1>
    </div>
    <div id="b2" class="box">
      <h1>boite2</h1>
    </div>
    <div id="b3" class="box">
      <h1>boite3</h1>
    </div>
    <div id="b4" class="box">
      <h1>boite4</h1>
    </div>
  </body>
</html>
 

 Tag(s) css / javascript

Rendu :0.0920 | Mémoire :2.88MB

Accueil | Informations | Top