Aller au contenu

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, impression, etc.).

Elles constituent le coeur du Responsive Web Design (RWD), permettant de concevoir des interfaces adaptatives et confortables sur tous types d'appareils.

Responsive Web Design : Adapter automatiquement la mise en page pour offrir une expérience optimale sur ordinateurs, tablettes et smartphones.

Mobile First et Desktop First : Permettre les approches d'amélioration progressive ou de dégradation gracieuse selon les capacités du dispositif.

Types de médias et caractéristiques : Cibler différents types de médias (screen, print, …) et tester des caractéristiques telles que width, height, orientation ou resolution.

➡️ W3C - Media Queries

media-query.png

Source image

Syntaxe

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

Elle se compose de trois éléments :

  1. Modificateur (optionnel) : Mots-clés comme not ou only pour exclure ou restreindre certains cas.

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

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

media-query-general-syntax.png

Source image

Exemple

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

Les styles à l'intérieur de la media query seront appliqués uniquement si la largeur de la fenêtre est supérieure ou égale à 600px.

Media Type

Le 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;
  }
}

Media Condition

Les Media Conditions permettent de combiner plusieurs caractéristiques à l'aide d'opérateurs logiques (and, or, not) pour créer des règles plus précises.

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

Ici, les styles s'appliquent uniquement si la largeur de l'écran est au moins 600px et que l'appareil est en mode paysage.

Media Feature

Les 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
  • aspect-ratio : Rapport largeur/hauteur
  • orientation : Portrait (vertical) ou landscape (horizontal)
  • resolution : Résolution de l'écran (en dpi ou dppx)

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

Media Feature

media-query-feature-syntax.png

Source image

Range Form

media-query-feature-range-syntax.png

Source image

➡️ MDN - Media features List

Exemple

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

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

@media (width >= 500px) and (width <= 800px) {
    /* Styles pour les écrans dont la largeur est comprise entre 500 et 800 pixels */
}

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.

Résolutions courantes

resolution-desktop.png

Source image

resolution-tablet.png

Source image

resolution-mobile.png

Source image

Tip

Bien que chaque site soit unique, certaines plages de largeurs sont devenues des références pour les différents types d'appareils :

  • Ordinateur de bureau : largeur > 1200 px
  • Tablette / petit écran (≈ 12–14 po) : largeur entre 768 px et 1200 px
  • Smartphone (paysage) : largeur entre 480 px et 768 px
  • Smartphone (portrait) : largeur < 480 px

➡️ 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.

media-query-rwd.png

Source image

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

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

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

Pixel CSS

Historiquement, un pixel CSS correspondait à un pixel physique sur un écran. Cependant, avec l'arrivée des écrans à haute densité (Retina, HiDPI, 4K, etc.), cette équivalence n'est plus valable.

Désormais, le pixel CSS est une unité abstraite utilisée pour garantir une apparence cohérente des éléments visuels, quel que soit l'appareil ou sa densité de pixels.

iphone-spec.png

Source image

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 résolution perçue par le navigateur lors du rendu du contenu. 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 peut occuper 200×200 pixels physiques sur un écran Retina.
  • Ce surplus de pixels physiques améliore la netteté et la clarté du rendu visuel.

css-pixel.png

Source image

Images et densité de pixels

Sur les écrans à haute densité, une image standard 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.

image-pixel-density.png

Source image

Exemple 1 - Image haute résolution

  • Image originale : 200x200 pixels
  • Taille d'affichage : 50x50 pixels CSS
  • Ecrans comparés :
    • Gauche : écran HiDPI (DPR = 2)
    • A droite : écran standard (DPR = 1)
  • Zoom : x4
  • Taille : 16 ko

image-pixel-density-example-1.png

Exemple 2 - Image standard

  • Image originale : 50x50 pixels
  • Taille d'affichage : 50x50 pixels CSS
  • Ecrans comparés :
    • Gauche : écran HiDPI (flou visible)
    • Droite : écran standard
  • Zoom : x4
  • Taille : 4 ko

image-pixel-density-example-2.png

Images vectorielles

Pour éviter les problèmes de netteté liés à la résolution, il est préférable d'utiliser des images vectorielles (SVG). Contrairement aux bitmaps, les vecteurs ne dépendent pas des pixels : ils peuvent être redimensionnés à volonté sans perte de qualité.

Cela garantit une clarté constante sur tous les types d'écrans, même à haute densité.

Exemple 3 - Image vectorielle

  • Format : SVG
  • Taille d'affichage : 50x50 pixels CSS
  • Ecrans comparés :
    • Gauche : écran HiDPI
    • Droite : écran standard
  • Zoom : x4
  • Taille : 3 ko

image-pixel-density-example-3.png