CSS - Media Queries

Les media queries en CSS sont un outil essentiel pour appliquer des styles conditionnels selon les caractéristiques du dispositif utilisé, comme la largeur ou la hauteur de l'écran, la résolution, ou le type de support (écran ou impression).

Elles constituent le coeur du Responsive Web Design (RWD) : ce sont elles qui mettent en oeuvre les approches Mobile First et Desktop First.

Types de médias et caractéristiques : Cibler un type de média (screen ou print) et tester des caractéristiques telles que width, height, orientation ou resolution.

➡️ W3C - Media Queries Level 4

Source image

Le site reste unique (un seul fichier HTML, une seule feuille de style) : les media queries choisissent quelles règles CSS s'appliquent selon l'appareil.

Syntaxe

Une media query utilise le mot-clé @media suivi d'une condition précisant quand les styles doivent s'appliquer.

Elle peut contenir trois éléments :

1. Modificateur (optionnel) : not inverse le résultat de la media query (ex. not print : tout sauf l'impression). only n'a aucun effet dans les navigateurs actuels (il servait à masquer la règle aux très anciens navigateurs). Un modificateur s'emploie toujours avec un type de média.

2. Type de média (optionnel) : Cible le type d'appareil (screen, print ou all, la valeur par défaut).

3. Caractéristiques de média : Spécifie les conditions liées aux propriétés de l'appareil (width, orientation, resolution, etc.).

Source image

Exemple

@media (width >= 600px) {
  …
}

Les styles à l'intérieur de la media query seront appliqués uniquement si la largeur du viewport (zone d'affichage de la page) est supérieure ou égale à 600px.

Exemple complet

@media screen and (width >= 600px) {
  /* styles appliqués sur un écran d'au moins 600 px de large */
}

• screen : type de média (les styles ne s'appliquent pas à l'impression)
• and : les deux conditions doivent être vraies
• (width >= 600px) : caractéristique testée

Sources :

• W3C - Media Queries Level 4 (2. Media Queries)
• MDN Web Docs - Using media queries

Media Type

Le type de média (media type) indique la catégorie générale de dispositif à laquelle la media query s'applique.

• all : Par défaut, cible tous les dispositifs.
• screen : Cible les écrans (ordinateurs, tablettes, téléphones).
• print : Cible les impressions ou les aperçus avant impression.

Exemple

@media print {
  header,
  footer {
    display: none;
  }
}

A l'impression, l'en-tête et le pied de page sont masqués (inutiles sur papier).

Les autres types de médias définis autrefois (tv, handheld, projection…) sont dépréciés.

Source : W3C - Media Queries Level 4 (2.3 Media Types)

Media Condition

Les conditions de média (media conditions) permettent de combiner plusieurs caractéristiques à l'aide d'opérateurs logiques (and : et, or : ou, not : non) pour créer des règles plus précises. Une liste de media queries séparées par une virgule (,) s'applique si l'une d'elles est vraie, comme avec or.

@media (width >= 600px) and (orientation: landscape) {
  …
}

Ici, les styles s'appliquent uniquement si le viewport mesure au moins 600px de large et que l'appareil est en mode paysage.

Source : MDN Web Docs - Using media queries (Creating complex media queries)

Media Feature

Les caractéristiques de média (media features) sont les propriétés spécifiques d'un appareil pouvant être testées dans une media query.

Exemples courants :

• width / height : Dimensions du viewport, en pixels CSS (voir Pixel CSS)
• aspect-ratio : Rapport largeur/hauteur
• orientation : portrait (vertical) ou landscape (paysage, horizontal)
• resolution : Densité de pixels de l'écran, en dpi (dots per inch, points par pouce) ou en dppx (pixels physiques par pixel CSS, voir Images et densité de pixels)
• hover : Le dispositif de pointage principal permet-il de survoler un élément (souris) ou non (écran tactile) ?

Ces caractéristiques peuvent être utilisées seules ou combinées.

Media Feature

Source image

Range Form (syntaxe en intervalle)

Les caractéristiques numériques (width, height, resolution…) se comparent avec <, <=, >, >= ou =, et une valeur peut être encadrée : (500px <= width <= 800px). Cette notation, plus lisible, est l'alternative moderne aux préfixes min- et max- (min-width, max-width), encore très répandus (voir Responsive Web Design).

Source : W3C - Media Queries Level 4 (2.4.4 Using "min-" and "max-" Prefixes On Range Features)

Source image

Source : MDN Web Docs - @media CSS at-rule (Media features)

Exemple

@media (orientation: portrait) {
  /* Styles spécifiques pour les appareils en orientation portrait */
}

@media (hover) {
  /* Styles pour les appareils qui permettent le survol, comme avec une souris */
}

@media (500px <= width <= 800px) {
  /* Styles pour un viewport de 500 à 800 pixels de large */
  /* Equivaut à : (width >= 500px) and (width <= 800px) */
}

Breakpoints

Les breakpoints (ou points de rupture) sont des repères essentiels dans la conception responsive. Ils indiquent les largeurs (ou parfois les hauteurs) d'écran à partir desquelles la mise en page, la taille du texte ou la disposition des éléments doivent s'ajuster pour préserver la lisibilité et l'ergonomie du site.

Un breakpoint marque donc le moment où le design d'un site web doit s'adapter pour offrir une expérience optimale sur un autre format d'écran.

Principe

• Les breakpoints ne doivent pas être déterminés uniquement selon les tailles d'appareils standards, mais selon le contenu. Il faut les placer là où la mise en page commence à se casser ou à devenir illisible.
• Ils permettent d'ajuster la présentation de manière fluide entre les formats : du smartphone au desktop, en passant par les tablettes et ordinateurs portables.

Source : MDN Web Docs - Responsive web design

Résolutions courantes

Source image

Source image

Source image

Tip

Bien que chaque site soit unique, certaines plages de largeurs du viewport servent souvent de point de départ :

• Ordinateur de bureau : largeur > 1200 px
• Tablette, petit ordinateur portable : largeur de 769 px à 1200 px
• Smartphone (paysage) : largeur de 481 px à 768 px
• Smartphone (portrait) : largeur ≤ 480 px

Les valeurs exactes varient d'un projet à l'autre : la bibliothèque CSS Bootstrap utilise par exemple 576, 768, 992, 1200 et 1400 px, et le TP06-2 fixe le passage à l'ordinateur de bureau à 1000 px.

Source : Bootstrap - Breakpoints (v5.3)

➡️ Yesviz - Viewport Size for Devices

Exemple

L'exemple suivant illustre comment adapter la couleur d'arrière-plan selon le type d'appareil à l'aide de media queries.

Source image

/* Mobile styles */
@media (width <= 480px) {
  body {
    /* red */
    background-color: #f09a9d;
  }
}

/* Tablet styles */
@media (480px < width <= 1200px) {
  body {
    /* yellow */
    background-color: #f5cf8e;
  }
}

/* Desktop styles */
@media (width > 1200px) {
  body {
    /* blue */
    background-color: #b2d6ff;
  }
}

Pixel CSS

Les largeurs testées par les media queries (width, height) et la valeur device-width de la balise meta viewport sont exprimées en pixels CSS, et non en pixels physiques de l'écran.

En pratique, sur les écrans des années 1990 et 2000, un pixel CSS correspondait à un pixel physique (un point lumineux de l'écran). Cependant, avec l'arrivée des écrans à haute densité, qui placent beaucoup plus de pixels physiques sur la même surface (appelés Retina chez Apple, HiDPI, High Dots Per Inch, ailleurs), cette équivalence n'est plus valable.

Désormais, le pixel CSS est une unité abstraite (définie par le W3C comme 1/96 de pouce, sa taille réelle varie selon l'écran) utilisée pour garantir une apparence cohérente des éléments visuels, quel que soit l'appareil ou sa densité de pixels.

Source image

Exemple : l'écran de l'iPhone 17 Pro mesure 1206 pixels physiques de large, mais son viewport ne mesure que 402 pixels CSS (1206 / 402 = 3). Pour une media query, c'est donc un smartphone en portrait (width <= 480px).

Sources :

• W3C - CSS Values and Units Module Level 4 (6.2 Absolute Lengths)
• Apple - iPhone 17 Pro - Tech Specs

Résolution matérielle vs résolution logicielle

Résolution matérielle

C'est la résolution physique de l'écran, déterminée par le nombre réel de pixels.

Exemple : un écran Full HD (1920×1080) contient 1920 pixels horizontaux et 1080 pixels verticaux.

Résolution logicielle (CSS)

C'est la taille de l'écran exprimée en pixels CSS : celle que le navigateur utilise pour la mise en page et que testent les media queries. Sur les écrans à haute densité, cette valeur ne correspond plus directement à la résolution matérielle.

Par exemple :

• Un carré de 100×100 pixels CSS occupe 200×200 pixels physiques sur un écran Retina de DPR 2 (300×300 sur un iPhone récent, de DPR 3).
• Ce surplus de pixels physiques améliore la netteté et la clarté du rendu visuel.

Source image

Images et densité de pixels

Sur les écrans à haute densité, une image standard (dont les dimensions en pixels sont égales à sa taille d'affichage en pixels CSS) peut paraître floue ou pixellisée. Pour y remédier, il est recommandé d'utiliser des images à plus haute résolution, adaptées au DPR (Device Pixel Ratio) de l'écran.

Note

DPR (Device Pixel Ratio) = ratio entre les pixels physiques et les pixels CSS

Exemple : un DPR de 2 signifie que chaque pixel CSS est rendu à l'aide de 2×2 pixels physiques.

En CSS, la caractéristique resolution exprime cette valeur en dppx : (resolution >= 2dppx) cible les écrans de DPR 2 ou plus. Le DPR n'est pas forcément entier (ex. 1,25 ou 1,5) et il change avec le zoom de la page.

Source : MDN Web Docs - Window: devicePixelRatio property

Source image

Comment lire les exemples ci-dessous

Chaque capture montre la même image (Pac-Man), affichée à 50×50 pixels CSS, sur deux écrans : un écran HiDPI à gauche et un écran standard à droite. Les captures sont agrandies 4 fois (zoom ×4) pour rendre les pixels visibles : à taille réelle, la différence est beaucoup plus discrète.

• A droite (écran standard) : l'écran n'a que 50×50 pixels physiques pour dessiner l'image. Le rendu est donc toujours un peu "en escalier", quelle que soit l'image : c'est la limite de l'écran.
• A gauche (écran HiDPI) : l'écran dispose de 100×100 pixels physiques (DPR 2). C'est ici qu'il faut comparer les trois exemples : l'image n'est nette que si elle contient assez de pixels (exemple 1) ou si elle est vectorielle (exemple 3).
• Repère : les boutons et les flèches du navigateur, dessinés par le système, sont toujours nets sur l'écran HiDPI. Ils permettent de voir si l'image est floue par rapport au reste de l'écran.
• Poids du fichier : la netteté a un coût. L'image de l'exemple 1 est 4 fois plus lourde que celle de l'exemple 2, donc plus longue à télécharger.

Exemple 1 - Image haute résolution

• Image originale : 200×200 pixels (4 fois la taille d'affichage : pour un DPR de 2, une image de 100×100 pixels suffirait)
• Taille d'affichage : 50×50 pixels CSS
• Ecrans comparés :
  • A gauche : écran HiDPI (DPR = 2)
  • A droite : écran standard (DPR = 1)
• Zoom : ×4
• Poids du fichier : 16 ko (kilo-octets)

Exemple 2 - Image standard

• Image originale : 50×50 pixels
• Taille d'affichage : 50×50 pixels CSS
• Ecrans comparés :
  • A gauche : écran HiDPI (flou visible)
  • A droite : écran standard
• Zoom : ×4
• Poids du fichier : 4 ko

Note

Sur l'écran HiDPI, le navigateur doit étirer chaque pixel de l'image sur 2×2 pixels physiques : Pac-Man devient flou, alors que les boutons du navigateur restent nets.

Images vectorielles

Pour les logos, icônes et illustrations, il est préférable d'utiliser des images vectorielles SVG (Scalable Vector Graphics) pour éviter les problèmes de netteté liés à la résolution. Une image matricielle (bitmap, ex. PNG ou JPEG) est une grille de pixels. Une image vectorielle décrit des formes (lignes, courbes, couleurs) que le navigateur redessine à la taille voulue : elle peut être redimensionnée à volonté sans perte de qualité.

Cela garantit une clarté constante sur tous les types d'écrans, même à haute densité. Les photos, trop détaillées pour être dessinées en vectoriel, restent en format matriciel : l'attribut HTML srcset permet alors de proposer plusieurs versions de l'image (ex. 1x et 2x), parmi lesquelles le navigateur choisit selon le DPR de l'écran.

Source : MDN Web Docs - Using responsive images in HTML (Resolution switching: Same size, different resolutions)

Exemple 3 - Image vectorielle

• Format : SVG
• Taille d'affichage : 50×50 pixels CSS
• Ecrans comparés :
  • A gauche : écran HiDPI
  • A droite : écran standard
• Zoom : ×4
• Poids du fichier : 3 ko

Formats WebP et AVIF

Les images haute résolution sont plus lourdes (voir l'exemple 1), donc plus longues à télécharger. Pour limiter leur poids, il existe des formats matriciels plus récents que JPEG et PNG, conçus pour mieux compresser les images du web :

• WebP : format qui peut remplacer à la fois le JPEG (photos) et le PNG (images avec transparence), et qui gère aussi l'animation (comme le GIF). A qualité comparable, un fichier WebP est 25 à 34 % plus léger qu'un JPEG, et environ 26 % plus léger qu'un PNG. Il est pris en charge par tous les navigateurs actuels.
• AVIF (AV1 Image File Format) : format ouvert et libre de droits, plus récent, qui compresse encore mieux (une photo AVIF est environ 50 % plus légère qu'un JPEG équivalent). Il gère aussi la transparence et l'animation. Il est pris en charge par les principaux navigateurs, mais depuis moins longtemps.

Sources :

• Google for Developers - An image format for the Web (WebP)
• MDN Web Docs - Image file type and format guide