Cours Media Queries en PDF (Intermédiaire)

Media Queries : éléments essentiels pour le Responsive Design. Les media queries sont une fonctionnalité de CSS3 au cœur du Responsive Web Design : elles adaptent les feuilles de style selon les caractéristiques de la zone de visualisation (viewport) ou de l'appareil (largeur, résolution, orientation). Document proposé au format PDF téléchargeable. Rédigé par Florian Rivoal. Document structuré selon une méthodologie pédagogique et des exemples pratiques.

🎯 Ce que vous allez apprendre

Principes et bonnes pratiques de niveau intermédiaire pour intégrer des requêtes média dans des interfaces adaptatives, en ciblant précisément les zones de visualisation et en conservant le contenu inchangé. Le cours insiste sur les stratégies d'adaptation d'affichage, les unités à privilégier et la maintenance des styles sur différents contextes.

👤 À qui s'adresse ce cours ?

• Public cible : développeurs web et concepteurs souhaitant maîtriser l'usage des requêtes média pour des interfaces adaptatives.
• Prérequis : connaissances de base en HTML et CSS et familiarité avec les feuilles de style.

Pourquoi utiliser les Media Queries for the Web ?

Offrent une expérience cohérente sur une diversité de devices et tailles de viewport, en adaptant la mise en page, la lisibilité et la performance via des styles conditionnels. Les media queries agissent comme des filtres appliquant des règles CSS conditionnelles selon le contexte. Employées avec des grilles fluides, des images adaptatives et une stratégie Mobile First, elles réduisent la maintenance et améliorent l'accessibilité. S'appuyer sur les spécifications CSS3 assure compatibilité et comportement prévisible.

Caractéristiques médias

Une requête média cible des caractéristiques mesurées sur la viewport : largeur et hauteur disponibles, orientation, résolution et densité de pixels. Les conditions évaluées portent sur la zone de visualisation effective et non sur la taille physique du device. Autrement dit, les requêtes opèrent sur la viewport et non directement sur les dimensions matérielles de l'écran.

Pixels CSS (logiques) vs Physical pixels : les pixels CSS (logiques) sont les unités utilisées par le navigateur pour le rendu et les media queries ; les « physical pixels » sont les pixels matériels. Un écran haute densité peut multiplier les physical pixels par pixel CSS (logique), d'où l'importance d'utiliser des images adaptées (SVG, srcset) et de tester la densité.

Syntaxe

Une requête combine un type de média et une ou plusieurs expressions qui vérifient des caractéristiques de la viewport. Types courants : screen pour les navigateurs, print pour l'impression et all. Pour l'accessibilité, le type speech permet d'adapter certains styles pour les agents vocaux.

Privilégiez la stratégie choisie (par exemple Mobile First favorise l'utilisation de min-width) et structurez les règles de façon claire pour la maintenance.

@media screen and (max-width: 768px) {
  /* styles pour écrans de petite largeur */
  body { font-size: 14px; }
}

/* Exemple combinant plusieurs conditions */
@media screen and (min-width: 600px) and (orientation: landscape) {
  /* styles appliqués quand la largeur minimale est atteinte et que l'orientation est paysage */
  .layout { grid-template-columns: repeat(3, 1fr); }
}

/* Exemples supplémentaires */
@media (orientation: landscape) {
  .header { height: 56px; }
}

Exemple pour l'impression : @media print { /* règle d'impression */ }.

Règles CSS et types de médias

Les requêtes permettent d'appliquer des règles et des styles conditionnels selon le média et les caractéristiques mesurées. Un même élément HTML peut recevoir des styles différents selon le contexte d'affichage : taille, orientation ou densité. Organisez les règles par priorité (par exemple styles de base, puis styles pour min-width) pour conserver la clarté. Les types (screen, print, speech) déterminent l'agent cible tandis que les expressions précisent les conditions d'application des styles.

Différence entre Mobile First et Desktop First

Mobile First commence par des styles de base pour petits écrans puis étend via min-width, favorisant une surcharge progressive des styles. Desktop First part de styles pour grands écrans et utilise max-width pour réduire ou réorganiser les styles on petits écrans. Le choix influe sur l'ordre logique des règles, la performance et la maintenance des feuilles de style.

Exemples de points de rupture (Breakpoints)

Les breakpoints correspondent aux largeurs où la mise en page doit s'ajuster. Adaptez-les aux contenus et aux cas d'usage plutôt qu'à des valeurs standard strictes. Valeurs fréquemment utilisées comme repères :

• 320px — petit mobile (anciens smartphones).
• 480px — mobiles standards.
• 768px — tablette en portrait.
• 1024px — tablette en paysage / petit desktop.
• 1200px+ — grands écrans desktop.

Adaptation responsive

Concevez d'abord pour les petites viewports (Mobile First) puis étendez les styles avec des requêtes basées sur min-width. Combinez grilles fluides, images adaptatives (srcset, sizes) et unités relatives (%, em, rem, vw). Limitez le nombre de breakpoints en fonction du contenu et testez les transitions entre états pour éviter des sauts visuels. Optimisez la performance en chargeant des ressources allégées pour les petits devices et en différant ce qui n'est pas critique.

Appliquer des règles CSS selon le média

Pour appliquer des styles conditionnels selon le type de média et les caractéristiques, séparez les règles dans des fichiers ou blocs logiques (par exemple fichier principal + fichier print). Chargez ou appliquez des règles spécifiques uniquement lorsque la condition est satisfaite afin de réduire le coût rendu et le travail du navigateur. Documentez les règles importantes et commentez les choix de breakpoints pour faciliter la maintenance et les revues de code.

L'indispensable balise Meta Viewport

La balise meta viewport indique au navigateur comment établir la zone de visualisation initiale sur mobile. Sans elle, les navigateurs mobiles peuvent appliquer un zoom par défaut, rendant les règles basées sur la largeur imprévisibles. Configuration standard recommandée :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Configurer correctement la viewport garantit que les unités de largeur utilisées dans les requêtes correspondent à la largeur réelle disponible pour le rendu.

Optimisation des zones de visualisation (Viewport)

Vérifiez systématiquement l'effet de la balise meta viewport sur les appareils ciblés et testez les cas d'usage courants : zoom utilisateur, changement d'orientation, présence de barres d'URL. Les comportements peuvent différer entre navigateurs et versions mobiles ; capturez les cas problématiques lors des tests et documentez les ajustements (CSS ou JavaScript) nécessaires. L'objectif est d'assurer une adaptation d'affichage stable et prévisible sans compromettre l'accessibilité.

Media Queries et Densité d'Écran (Retina)

Les écrans haute densité utilisent plusieurs physical pixels par pixel CSS (logique). Utilisez des conditions sur la résolution pour adapter images et icônes :

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* styles ou images pour écrans haute densité */
  .logo { background-image: url('logo@2x.png'); background-size: contain; }
}

Privilégiez les SVG ou srcset pour assurer netteté et performance. Les règles basées sur la densité permettent de charger les ressources appropriées sans dupliquer inutilement le poids des pages.

FAQ

Comment fonctionne une media query ? Une media query combine un type de média et des expressions qui vérifient des caractéristiques de la viewport, par exemple @media (min-width: 600px) applique des styles lorsque la condition est satisfaite.

Les media queries remplacent-elles les feuilles de style classiques ? Non. Elles complètent les feuilles de style pour appliquer des styles conditionnels selon le contexte d'affichage, sans modifier le contenu HTML.