Media Queries CSS : Guide des Spécifications W3C (PDF Gratuit)

Introduction à Media Queries

Media Queries est la spécification du W3C qui décrit comment adapter la présentation d'un document selon des media features telles que width, height, aspect-ratio et resolution (dpi/dpcm), et ce document suit explicitement la transition vers Media Queries Level 4 telle qu'observée en 2026.

Conçues pour le Responsive Design, les media queries permettent d'écrire des règles @media et d'utiliser l'attribut media sur les balises link pour cibler des environnements définis par des expressions comme (min-width: 600px) ou (max-aspect-ratio: 16/9).

Ce que vous allez apprendre

• Écrire des requêtes @media ciblant la largeur d'affichage via expressions min-width et max-width, avec exemples chiffrés (ex. min-width: 480px et max-width: 1200px).
• Comprendre la syntaxe des media features propres à Level 4, dont aspect-ratio au format rationnel et resolution utilisant dpi ou dpcm.
• Analyser les unités pratiques en contexte : conversion entre px, em et rem pour des seuils adaptatifs, plus l'interprétation de dpi pour la densité d'écran.
• Mettre en place des règles robustes en tenant compte du traitement des valeurs inconnues par les navigateurs (les agents évaluent les features inconnues à false), et tester le comportement dans devtools avec DPR simulé.
• Intégrer les considérations d'accessibilité en utilisant des media features dédiées comme prefers-reduced-motion ou forced-colors pour réduire les animations ou forcer des palettes adaptées aux aides techniques.
• Employer @import avec la clause media et optimiser l'ordre des feuilles pour minimiser les recalculs de layout lors des changements d'orientation.

Prérequis

• Maîtrise des sélecteurs CSS et de la spécificité (specificity) pour organiser des règles @media sans conflits.
• Connaissance des unités CSS courantes (px, em, rem) et capacité à convertir des seuils en rem pour un design scalable.
• Accès à un environnement de test : navigateurs avec devtools capables d'émuler device pixel ratio (DPR) et d'afficher la valeur resolution.

Aperçu des modules

• Historique et portée : origine des media types hérités d'HTML4/CSS2 et les nouvelles extensions introduites en Media Queries Level 4.
• Syntaxe détaillée : composition des expressions, opérateurs logiques (and, not) et exemples concrets avec min-resolution et max-aspect-ratio.
• Gestion des erreurs : règles de parsing, traitement des features inconnues par les agents, et exemples de requêtes malformées à éviter.
• Caractéristiques multimédia : tests pratiques sur width, height, orientation, aspect-ratio, color, resolution et features d'accessibilité.
• Unités et valeurs : cas d'usage comparé de dpi vs dpcm, spécification des valeurs rationnelles pour aspect-ratio et seuils en px/rem.
• Exemples applicatifs : snippets montrant des breakpoints typiques (min-width: 768px pour tablettes) et stratégies pour images responsive via media queries.
• Bonnes pratiques d'implémentation : ordonnancement des règles CSS et recommandations pour limiter le reflow lors de changements d'orientation ou d'échelle.
• Références normatives : renvoi aux sections pertinentes du W3C Media Queries Level 4 pour chaque feature mentionnée dans les exemples.

Questions fréquentes — définitions et précisions

Requête medias en CSS : définition

Une requête medias est une expression logique composée d'un media type optionnel (par exemple screen) et d'expressions conditionnelles sur des media features (ex. (min-width: 600px)) utilisée dans une règle @media.

Types de médias applicables

Les types classiques comprennent screen, print et projection, hérités d'HTML4/CSS2, et ils s'utilisent avec des combinaisons d'expressions comme screen and (min-resolution: 2dppx).

Traitement des erreurs dans les requêtes

Note importante : les agents utilisateurs évaluent les requêtes malformées ou les media features inconnues à false, ce qui évite l'application involontaire de styles — cette mise en garde est explicitée dans le document.

Différence entre "width" et "device-width"

width fait référence à la largeur de la zone d'affichage du document (viewport), tandis que device-width indique la largeur physique totale de l'écran en CSS pixels.

Unités dans les expressions

Les expressions acceptent des unités CSS standard : px, em, rem pour les dimensions, et dpi ou dpcm pour la caractéristique resolution.

Ciblage de la résolution d'un périphérique

La caractéristique resolution décrit la densité de pixels et peut être combinée avec min- ou max- (par exemple (min-resolution: 192dpi)) pour charger des assets adaptés.

Mis à jour le 11/03/2026