Fiche N°16 - Les media queries pour des sites web responsives !

Les Media Queries, (ou requêtes de media) présentes dans vos fichiers CSS adaptent la mise en page au périphérique de consultation.

Les Media Queries permettent d’adapter l’affichage des pages au type et à la dimension des périphériques.
Le mode opératoire des media queries est de tester si une condition (ou une combinaison de conditions) est remplie et dans l’affirmative de modifier une ou plusieurs règles préexistantes d’un fichier .css.

Règle @media suivie d’un test de dimension d’un périphérique :

Exemple :

@media (max-width: 590px) {
    body, 
    .page, 
    .header, 
    .wrapper, 
    .content, 
    .aside {
        width: auto;       
        margin: auto;
    }
}

Traduction en français dans le texte :

Si l’écran fait au maximum 590px de largeur :
passer certains éléments de largeur fixe en largeur automatique.

Les media queries se placent en fin de fichier .css et viennent surcharger des règles précédemment définies.
La règle media est indispensable pour rendre plus confortable la consultation d’un site web sur les petits écrans. On peut selon les besoins :

faire passer le contenu sur une seule colonne
ajuster les dimensions et les marges.
agrandir la taille du texte
masquer ou afficher des éléments spécifiques
etc.

Règle @media suivie du type de périphérique concerné :

Exemple :

@media print {
  #menu, #footer, aside {
    display:none;
  }
  body {
    font-size:120%;
    color:black;
  }
}

Ici, lors d’une impression, on supprime les dispositifs inutiles (navigation et pied de page) et on augmente la taille des caractères qui seront de couleur noire.

Critères de test (ou fonctionnalités) les plus utilisés :

height dimension en hauteur de la zone d’affichage
width dimension en largeur de la zone d’affichage
device-height dimension en hauteur du périphérique
device-width dimension en largeur du périphérique

Ils sont préfixés par min- et max- pour définir des valeurs numériques minimales ou maximales à respecter.
Nota : Les couples propriétés-valeurs numériques sont toujours entre parenthèses.

Type de périphériques les plus utilisés :

screen écrans
print impression
tv téléviseur

Associer plusieurs conditions

Pour définir précisément l’ensemble des conditions à réunir, il suffit d’associer plusieurs expressions de test au moyen d’un opérateur logique.

Exemple :

@media screen and (min-width: 200px) and (max-width: 640px) {
  .bloc {
    display:block;
    clear:both;
  }
}

Pour un écran de largeur comprise entre 200px et 640px, la classe .bloc sera modifiée.

Les opérateurs logiques peuvent être :
- and "et",
- not "non".

Un moyen simple de tester l’efficacité des media queries est de redimensionner la fenêtre et de vérifier l’application dynamique des feuilles de style.