Requêtes média

Les requêtes média sont une fonctionnalité de CSS qui permet au contenu d'une page web de s'adapter à différentes tailles et résolutions d'écran. Elles constituent un élément fondamental de la conception web adaptative et servent à personnaliser l'apparence des sites web pour plusieurs appareils.

Les requêtes média peuvent être insérées dans le HTML d'une page web ou incluses dans un fichier .CSS distinct référencé par la page web. Voici un exemple de requête média simple :

@media screen and (max-width: 768px)
{
  header { height: 70px; }
  article { font-size: 14px; }
  img { max-width: 480px; }
}

La requête média ci-dessus s'active si la fenêtre du navigateur d'un utilisateur fait 768 pixels de large ou moins. Cela peut se produire si vous réduisez la taille de votre fenêtre sur un ordinateur de bureau ou si vous utilisez un appareil mobile, comme une tablette, pour consulter la page web.

Dans la conception web adaptative, les requêtes média servent de filtres pour différentes tailles d'écran. Comme tous les modules d'une feuille de style en cascade, celles qui apparaissent plus bas dans la liste remplacent celles qui se trouvent au-dessus. Par conséquent, les styles par défaut sont généralement définis en premier dans un document CSS, puis viennent les requêtes média pour différentes tailles d'écran. Par exemple, les styles pour ordinateur de bureau peuvent être définis en premier, suivis d'une requête média contenant des styles pour les utilisateurs de tablettes, puis d'une requête média conçue pour les utilisateurs de smartphones. Les styles peuvent également être définis dans l'ordre inverse, ce que l'on appelle le développement « mobile first ».

Bien que min-width soit de loin la fonctionnalité la plus couramment utilisée dans les requêtes média, il en existe également beaucoup d'autres. Parmi les exemples, on trouve min-device-width, min-device-height, aspect-ratio, max-color-index, max-resolution, orientation et resolution. La valeur resolution, par exemple, peut servir à détecter les écrans HiDPI, comme les écrans Retina, et à charger des images haute résolution au lieu d'images standard.