Les règles disponibles

Il existe de nombreuses règles permettant de construire des media queries. Je vous présente ici les principales :

color : gestion de la couleur (en bits/pixel).
height : hauteur de la zone d'affichage (fenêtre).
width : largeur de la zone d'affichage (fenêtre).
device-height : hauteur du périphérique.
device-width : largeur du périphérique.
orientation : orientation du périphérique (portrait ou paysage).
media : type d'écran de sortie. Quelques-unes des valeurs possibles :

screen : écran « classique » ;
handheld : périphérique mobile ;
print : impression ;
tv : télévision ;
projection : projecteur ;
all : tous les types d'écran.

On peut rajouter le préfixe min- ou max- devant la plupart de ces règles. Ainsi, min-width signifie « Largeur minimale », max-height « Hauteur maximale », etc.
La différence entre width et device-width se perçoit surtout sur les navigateurs mobiles des smartphones, nous en reparlerons plus loin.

Les règles peuvent être combinées à l'aide des mots suivants :

only : « uniquement » ;
and : « et » ;
not : « non ».

Voici quelques exemples de media queries pour vous aider à bien comprendre le principe.

/* Sur les écrans, quand la largeur de la fenêtre fait au maximum 1280px */

@media screen and (max-width: 1280px)

/* Sur tous types d'écran, quand la largeur de la fenêtre est comprise entre 1024px et 1280px */

@media all and (min-width: 1024px) and (max-width: 1280px)

/* Sur les téléviseurs */

@media tv

/* Sur tous types d'écrans orientés verticalement */

@media all and (orientation: portrait)

Les anciens navigateurs, notamment IE6, IE7 et IE8, ne connaissent pas les media queries mais sont capables d'interpréter le début de la règle (ils savent lire @media screen par exemple). Ils vont donc lire les propriétés CSS qui suivent même s'ils ne sont pas concernés par la règle ! Pour éviter cela, une astuce consiste à utiliser le mot-clé only que ces vieilles versions ne connaissent pas :
« @media only screen » ne provoquera pas de bug sur les vieux navigateurs.

Tester les media queries

Les media queries sont surtout utilisées pour adapter le design du site aux différentes largeurs d'écran.

Faisons un test tout simple : nous allons changer la couleur et la taille du texte si la fenêtre fait plus ou moins de 1024 pixels de large. Pour ce test, je vais utiliser la seconde méthode qui consiste à écrire la règle directement dans le même fichier .css que d'habitude :

/* Paragraphes en bleu par défaut */

{

color: blue;

}

/* Nouvelles règles si la fenêtre fait au plus 1024px de large */

@media screen and (max-width: 1024px)

{

color: red;

background-color: black;

font-size: 1.2em;

}

Dans notre feuille CSS, nous avons d'abord demandé à ce que le texte des paragraphes soit écrit en bleu, jusque là rien de nouveau. En revanche, nous avons ajouté une media query qui s'applique à tous les écrans dont la largeur ne dépasse pas 1024px. À l'intérieur, nous avons appliqué des règles CSS sur les paragraphes pour les écrire plus gros et en rouge.

Résultat : la page n'a pas la même apparence selon la taille de la fenêtre (figure suivante) ! Essayez de la redimensionner pour voir !

L'apparence du texte change en fonction de la taille de la fenêtre

Créé avec HelpNDoc Personal Edition: Générateur complet de livres électroniques Kindle