Le Pic
Projet Internet et Citoyenneté

Accueil > LES OUTILS > SPIP, la doc du CMS > Des mises en pages personnalisées >

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

dernière modification 11 octobre 2023

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 :

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 :

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 :

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.