Que sont les Media Queries et comment les utiliser ?

les media queries : comment les utiliser

Les Media Queries sont un outil essentiel pour la conception web: que vous soyez adepte du mobile first, du responsive design ou du design adaptatif; l’objectif sera d’optimiser la flexibilité de votre site web ou application pour s’adapter convenablement à toutes les supports.

Les Media Queries sont des règles qui permettent de modifier l’apparence d’un site ou d’une application.

Ces règles CSS peuvent être multiples, elles peuvent s’appliquer en fonction :

  • du type d’appareil (écran, TV, impression, synthèse vocale…)
  • de dimensions tels que la largeur ou la hauteur de la zone d’affichage (viewport)
  • de la résolution de l’écran
  • de l’orientation (portrait, paysage…)

Les objectifs des Media Queries

Le but principale est de créer des règles de rendus pour votre site web ou application, tels que :

  • masquer ou afficher des éléments
  • contrôler la taille des textes
  • présenter le contenu de façon spécifique (une colonne, 2 colonnes…)
  • ajuster les dimensions et marges des certaines zones

Prérequis à l’usage des Media Queries

Pour que les Media Queries fonctionnent correctement et soient prises en compte sur les dispositifs, il est essentiel de rajouter dans l’en-tête de votre page web (balise <head>) via la balise <meta> suivante :

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

On indique alors au navigateur que le « viewport« , c’est à dire la surface d’affichage du navigateur, doit :

  • s’adapter à la largeur d’affichage de l’appareil,
  • avec une échelle initiale de 1.

La syntaxe des Media Queries

La syntaxe de rédaction CSS pour implémenter les media queries est la suivante :

@media screen and (min-width: 420px) {
/* avec vos sélecteurs CSS : Insérez vos propriétés: valeurs, */
}

Cette instruction Media Queries signifie que le style écrit entre les accolades sera appliqué : aux écrans ET dont la taille minimale est de 420pixels.

Les opérateurs logiques

L’écriture des Media Queries est plutôt explicite (in english of course), elle est basée essentiellement sur le fait qu’une expression est vraie ou fausse (conditions true/false) via des opérateurs logiques.

Vous pouvez associer différentes déclarations en utilisant des opérateurs logiques tels que « and » (et), « only » (uniquement) et « not » (non).
Si vous avez besoin d’un « or » (ou, il vous suffit d’énumérer plusieurs Media Queries, séparées par des virgules. Si l’une d’entre elles est valide, alors la règle s’appliquera.

Généralement, vous combinez un type de média (comme « screen » ou « all ») avec une expression ou plusieurs entre parenthèses, en utilisant « and« .
Cependant, une expression seule, placée entre parenthèses, peut également être utilisée.

@media screen and (min-width: 400px) and (max-width: 860px) {
  .flexize {
    display: flex;

  }
}

Les Media Queries par caractéristiques

Par type d’appareil

L’attribut media peut prendre les valeurs suivantes :

  • screen : Écrans
  • print : Impression
  • speech : Synthèses vocales
  • all : Tous les précédents

Les media suivants sont devenus dépréciés :

  • tv : Téléviseur
  • braille : Plages braille
  • embossed : Imprimantes braille
  • projection : Projecteurs (ou présentations avec slides)
  • tty : Terminal/police à pas fixe

Voici des exemples de règles media queries pour les types d’appareils écran et TV :

@media screen {
.test {
color: red;
}
}
@media tv {
.test {
color: green;
}
}

Selon les dimensions du viewport

Les unités disponibles pour les dimensions sont : px, em, rem, pt, vw, vh

  • largeur de la zone d’affichage
    • width : respecte la largeur
    • min-width : respecte une largeur minimum de
    • max-width : respecte une largeur maximum de
  • hauteur de la zone d’affichage
    • height : respecte la hauteur
    • min-height : respecte une hauteur minimum de
    • max-height : respecte une hauteur maximum de

Par orientation et/ou ratio

Vous pouvez définir des règles de présentation en fonction de :

  • orientation : orientation du périphérique (portrait ou landscape)
  • device-aspect-ratio : ratio du périphérique de sortie (par exemple 16/9)
  • aspect-ratio : ratio de la zone d’affichage

Selon la résolution

Pour définir une règle Media Query selon la résolution du périphérique (en dpi, dppx, ou dpcm) , vous pouvez utilisez l’instruction suivante :

@media screen and (resolution: 300dpi) {
.test {
color: red;
}
}
  • resolution : respecte la résolution
  • min-resolution : respecte une résolution minimum
  • max-resolution : respecte une résolution maximum

Les Media Queries vous permettront de créer des expériences utilisateurs optimales en ajustant dynamiquement le contenu en fonction des dispositifs utilisés.

Je vous souhaite de bonnes expérimentations !