Media queries

Les requêtes média, plus souvent appelées media queries, sont un outil de responsive design qui permet d'adapter la feuille de style CSS en fonction de différents paramètres ou caractéristiques de l'appareil. Par exemple, on pourra appliquer différents styles si l'écran de l'appareil utilisé pour consulter le document est plus petit qu'une taille donnée ou si l'utilisateur tient son appareil en mode portrait ou paysage. La règle @ (ou at-rule) @media est utilisée afin d'appliquer les styles de façon conditionnelle.

De plus, la syntaxe des requêtes média est également employée dans d'autres contextes, notamment l'attribut media de l'élément <source> qui permet de définir une chaîne de caractères contenant une requête média afin de choisir le fichier source utilisé pour une image grâce à l'élément HTML <picture>.

De plus, la méthode du DOM Window.matchMedia() peut être utilisée afin de tester le résultat d'une requête média pour la fenêtre courante. On peut également utiliser la méthode MediaQueryList.addListener() (en-US) afin de recevoir une notification lorsque l'état de la requête évolue. Grâce à cette fonctionnalité, un site ou une application peut réagir aux changements de configuration, d'orientation ou d'état.

Vous pouvez en découvrir plus dans l'article Tester des requêtes media.

Référence

Règles @

Guides

Manipuler les requêtes média

Cet article présente les requêtes média, ce qu'elles font, et explique les différentes expressions qu'il est possible d'utiliser.

Tester les requêtes média

Cet article explique comment tester une requête média grâce à un programme JavaScript. On pourra par exemple déterminer l'état de l'appareil, mettre en place des gestionnaires d'évènements afin d'être notifié lorsque les résultats d'une requête média évoluent (par exemple lorsqu'un utilisateur tourne son appareil).

Utiliser des requêtes média pour l'accessibilité

Cet article explique comment les requêtes média peuvent être utilisées afin de rendre un site plus accessible.

Spécifications

Specification
Media Queries Level 4
CSS Conditional Rules Module Level 3

Voir aussi

  • La règle-@ @supports afin d'appliquer une mise en forme selon que l'agent utilisateur prend ou non en charge certaines technologies CSS.