Easy-Micro


TECHNIQUE CSS
CSS Media queries

Site responsive avec les media queries CSS

Exemple d'utilisation des médias queries CSS avec un menu burger responsive
Le code HTML :
<nav id="monnav">
<a href="#" id="burger" onclick="affichemenu()">&#9776;</a>
<ul>
<li><a href="#" title="Destination">Destination</a></li>
<li><a href="#">Promos</a></li>
<li><a href="#">A propos</a></li>
</ul>
</nav>

La feuille de style CSS:
 /* Par défaut, le burger est caché */
    #burger {display:none; width:0px;}

/* Si écran en dessous de 800px */
@media screen and (max-width:800px){
    
          /* Le menu classique disparaît */
          nav ul li{
          display:none;
          width:0px;
          } 
    
          /* Le burger apparaît */
          nav #burger{
          display:inline;
          }
    
          /* Le menu du burger apparaît 
          Cette classe est appelée par le javascript */
          nav.myburger ul li {
          display:block;
          width:100%;
          }
}

Le code Javascript :
<script>
function affichemenu(){
var varNav =  document.getElementById("monnav");

   /* Si il existe une classe monnav, 
alors je lui rajoute la classe myburger */
   if (varNav.className === "monnav") {
         varNav.className += " myburger";
   }
   /*Sinon, je lui affecte la classe monnav*/
   else {
        varNav.className = "monnav";
   }        
}
</script>

Autre exemple, la page HTML contient un <div id="contenu"> avec une image dans un SPAN qui disparaît si l'on réduit l'écran au delà de 480 pixels.

La page contient en plus un menu (sous forme de UL) qui change de position.

Voici la page HTML :

<html>
<head>
<title>Easy-Micro</title>
<link rel="stylesheet" type="text/css" href="css/monstyle.css"/>
</head>
<body>
<div id="principal">
<h1>Easy-Micro</h1>

   <div id="menu">
   <ul class="menuprincipal">
   <li class="regle2"><a>Accueil</a></li>
   <li class="regle2"><a>Produits</a></li>
   <li class="regle2"><a>Contact</a></li>
   </ul>
   </div>

   <div id="contenu">
   Bienvenue à <br>
   toutes et à tous, sur le site d'Easy-Micro<br><br>
   <span class="regle1"><a href="http://www.easy-micro.org" target="_blank" title="Easy-Micro">
   <img src="images/1.jpg" class="monimg" alt="Easy-Micro"/></a></span>
   visitez le site de <a href="http://www.easy-micro.org" target="_blank" title="Easy-Micro">Easy-Micro</a><br/>
   Le Responsive Web Design regroupe une série de techniques de conception graphique et de développement
   <span class="regle1">permettant de créer un site qui pourra s'auto-adapter en fonction de la taille d'un écran.</span>
   </div>

</div>
</body>
</html>

Voici la feuille de style pour un site Responsive avec media queries :

/* CSS classique */
img.monimg {
max-width: 80%; / responsive sur image */
border-style:none;
float:left;
margin-right:5px; }

div#principal{
width:100%; / responsive sur cadre principal */
margin-left:auto;
margin-right:auto;
}

div#menu { float:none;}

div#contenu { width:85%;float:left; }

li.regle2 { display: inline; margin:10px; }

/* Losque l'écran est inférieur à 480px */
@media screen and (max-width: 480px) {

/* on fait disparaître le span qui contient le texte */
#contenu span.regle1 { display: none; }

/* on change la position du menu */
div#menu { float:left; }

ul li.regle2 { display: block; }

}



Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Jeudi 24 janvier 2019 - Semaine 04 - Saint François de Sales (Demain: Saint Manuel)
Aujourd'hui, c'est l'anniversaire de Daniel Auteuil (1950-69 ans), acteur français, de Nastassja Kinski (1961), actrice et mannequin allemande et de Muriel Moreno (1963), chanteuse française (du groupe Niagara). Autre 24 janvier: 2009 - Tempête Klaus sur le sud-ouest de la France (60% des forêts sont dévastées).
Haut de page Easy-Micro