Accueil > LES OUTILS > SPIP, la doc > Mise en pages > Fiche N°16 - Les media queries pour des sites web responsives (...)

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


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.