Media queries

Les médias queries permettent d'adapter le contenu d'une page aux caractéristiques de l'appareil de l'utilisateur.

Par exemple, pour distinguer l'écran d'un cellulaire versus l'écran plus large d'un ordinateur, on pourrait utiliser la media query suivante:

@media screen and (min-width: 1000px) { ... }

Dans ce cas j'ai:

  • Une déclaration de media query @media

  • Un type de média screen

  • Un opérateur logique and

  • Une caractéristique (min-width: 1000px)

Nous pourrions donc définir la couleur rouge comme couleur de fond de notre page:

body { background: red; }

Et si notre media query est respectée, être un écran et avoir une largeur minimale de 1000px, redéfinir cette couleur à bleu:

@media screen and (min-width: 1000px) { 
  body { background: blue; }
}

Types de média

Le type de média est optionnel. Il correspond au contexte utilisé pour consulter à la page.

  • all couvre tous les types de médias de cette liste (par défaut).

  • screen Si quelqu'un consulte la page via un écran 📱/💻.

  • print Si quelqu'un décide d'imprimer la page 🖨️.

  • speech Si quelqu'un utilise un outil de synthèse vocale 🔊.

Caractéristiques de média

Les caractéristiques média s'écrivent toujours entre parenthèses et testent si une condition spécifique est respectée.

  • min-width/max-width Basé sur la largeur du viewport (de la fenêtre). Ex: (min-width: 1000px)

  • min-height/max-height Basé sur la hauteur du viewport (de la fenêtre). Ex: (max-height: 600px)

  • min-aspect-ratio/max-aspect-ratio Le rapport largeur/hauteur du viewport (de la fenêtre). Ex: (min-aspect-ratio: 16/9)

  • orientation portrait ou landscape

  • prefers-reduced-motion no-preference ou reduce. Certaines personnes sont sensibles aux animations 🤮. D'où pourquoi de plus en plus d'appareils laissent indiquer à l'utilisateur si il préfère un niveau d'animation normal ou réduit. Ex: (prefers-reduced-motion: reduce)

  • prefers-color-scheme light ou dark ◻️/◼️. Ex: (prefers-color-scheme: dark)

Opérateurs logiques

Permettent d'indiquer le lien entre différentes parties de notre média query.

and Permet de combiner plusieurs requêtes média en une seule. Pour que la requête soit respectée, il faut que chacune des sous-requêtes soit vraie. ex: screen and (min-width: 1000px) s'appliquera sur tous les écrans de minimum 1000px de large.

not Retourne le résultat opposé d'une requête média. S'il est utilisé dans une liste de requêtes séparées par des virgules, il ne nie que la requête sur laquelle il est appliqué. ex: not (orientation: landscape) s'appliquera sur tous les écrans dont l'orientation est portrait.

, (virgule) Permet de combiner plusieurs requêtes. Chaque requête est traitée séparément. Il suffit qu'une seule de ces requêtes soit respectée pour que les styles s'appliquent. ex: (orientation: landscape), (min-width: 600px) s'appliquera sur les appareils dont l'orientation est landscape et/ou la largeur minimale est de 600px. Donc une tablette en mode portrait serait quand même affectée par les styles même si son orientation ne correspond pas.

Breakpoints

Même si notre site est parfaitement responsive, il est parfois souhaitable de faire un changement d'affichage dans certains contextes, afin d'éviter que la dimension de certains éléments devienne un enjeu.

Par exemple, deux sections juxtaposées sur un écran large font du sens. Cependant sur l'écran plus restreint d'un mobile, elles risquent d'être ridiculement coincées. D'où l'utilité à un certain point (Breakpoint) de changer les règles d'affichage via une media query.

Ainsi, les sections pourraient passées de demis:

.section { width: 50%; }

À pleines lorsque la largeur de l'écran est inférieur à 600px:

@media (max-width: 600px) { 
  .section { width: 100%; } 
}

Où les utiliser?

Les médias queries peuvent être utilisés à différents endroits:

  • Dans les feuilles de styles.

  • Directement sur une balise <link>. ex: les styles contenu dans le fichier print.css ne devraient s'appliquer que lorsque l'utilisateur imprime la page et non lorsque celle-ci est affichée à l'écran:

<link href="print.css" rel="stylesheet" media="print">