Comment fonctionnent les requêtes média en…

Les requêtes média permettent d'appliquer des styles CSS spécifiques en fonction des caractéristiques de l'appareil ou de la zone d'affichage. Elles sont utilisées pour créer un design adaptatif qui s'affiche correctement sur différents écrans, y compris les appareils mobiles, les tablettes et les ordinateurs de bureau.

Syntaxe principale de la requête média :

@media <type_de_média> and (<expression>) {
  /* règles CSS */
}

<type_de_média> détermine à quel type d'appareil la requête s'applique (par exemple, screen, print, all).
<expression> définit les conditions sous lesquelles les styles sont appliqués (par exemple, largeur, hauteur, orientation de l'écran, résolution).

Expressions populaires pour la conception adaptative :

min-width : Les styles s'appliquent si la largeur de la zone d'affichage est égale ou supérieure à la valeur spécifiée.
max-width : Les styles s'appliquent si la largeur de la zone d'affichage est inférieure ou égale à la valeur spécifiée.
orientation : Les styles s'appliquent en fonction de l'orientation de l'écran (portrait ou landscape).
resolution : Les styles s'appliquent en fonction de la résolution de l'écran.

Exemple d'utilisation de max-width pour le style sur mobile :

/* Styles par défaut */
body {
  font-size: 16px;
}

/* Styles pour les écrans jusqu'à 768px de large (typiquement pour mobiles) */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .container {
    padding: 10px;
  }
}

Exemple d'utilisation de min-width pour le style sur desktop (approche "mobile first") :

/* Styles par défaut pour mobile */
.column {
  width: 100%;
}

/* Styles pour les écrans à partir de 992px de large (typiquement pour desktop) */
@media screen and (min-width: 992px) {
  .column {
    width: 50%;
    float: left;
  }
}

Combinaison d'expressions avec les opérateurs and, or (dans les requêtes média, or s'écrit avec une virgule) et not :

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* Styles uniquement pour les tablettes */
}

@media screen and (orientation: landscape), print {
  /* Styles pour l'orientation paysage et pour l'impression */
}

La méta-balise viewport est importante pour le bon fonctionnement des requêtes média sur les appareils mobiles :

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

width=device-width définit la largeur de la zone d'affichage égale à celle de l'appareil.
initial-scale=1.0 définit le niveau de zoom initial.

Sans cette méta-balise, de nombreux navigateurs mobiles zooment par défaut, ignorant la largeur réelle de l'appareil, ce qui compromet la réactivité.

Comment fonctionnent les requêtes média en développement web pour le design adaptatif, y compris les appareils mobiles?