Lesrequêtes média CSS, plus souvent appeléesmedia queries, sont un outil deresponsive design qui permet d'adapter la feuille de styles CSS en fonction de différents paramètres ou caractéristiques de l'appareil.

Par exemple, on pourra appliquer différentes mises en forme selon la taille dela zone d'affichage pour que la disposition soit correcte selon les tailles d'écran des appareils.

Par exemple, on pourra utiliser une police de caractères plus petite pour les appareils avec des petits écrans, augmenter l'espace entre les paragraphes si la page est vue en mode portrait, ou encore augmenter la taille des boutons sur les écrans tactiles.

C'estla règle @@media qui est utilisée enCSS pour appliquer de façon conditionnelle un fragment d'une feuille de styles selon le résultat d'une requête média. Si on souhaite appliquer de façon conditionnelle une feuille de styles entière, on utilisera@import.

Lorsqu'on conçoit des composants HTML réutilisables, on peut également utiliserles requêtes de conteneur qui permettent d'appliquer des mises en forme selon la taille de l'élément englobant plutôt que par rapport à la zone d'affichage ou aux caractéristiques de l'appareil.

Les requêtes média en HTML

EnHTML, on peut appliquer des requêtes média à différents éléments :

• Dans l'attributmedia de l'élément<link>, qui définit le média auquel une ressource liée (généralement du CSS) s'applique.
• Dans l'attributmedia de l'élément<source>, qui définit le média sur lequel la source s'applique (uniquement valide à l'intérieur d'éléments<picture>).
• Dans l'attributmedia de l'élément<style>, qui définit le média auquel le style s'applique.

Les requêtes média en JavaScript

EnJavaScript, on peut utiliser la méthodeWindow.matchMedia() pour tester une requête média par rapport à la fenêtre courante. On peut également utiliserMediaQueryList.addListener() pour réagir aux changements d'états d'une requête média. Grâce à cette méthode, votre site ou application peut réagir aux modifications de configuration, d'orientation ou d'état.

Pour en savoir plus sur les tests des requêtes média dans des programmes, voir l'articleTester les requêtes média.

Référence

Règles @

• @import
• @media

Guides

Utiliser les requêtes média

Cet article présente les requêtes média, leur syntaxe, les opérateurs et caractéristiques média utilisées pour les construire.

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é·e lorsque les résultats d'une requête média évoluent (par exemple lorsque la personne tourne son appareil ou redimensionne la fenêtre de son navigateur).

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

Voir aussi

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