Les media queries (ou requêtes de media) en CSS3 permet de cibler plus finement les périphériques de destination en fonction de leurs capacités.
L'écriture de ces requêtes est relativement explicite (en anglais) : une media query est une expression dont la valeur est toujours vraie ou fausse.
Il suffit d'associer les différentes déclarations possibles avec un opérateur logique pour définir l'ensemble des conditions à réunir pour l'application des styles compris dans le bloc adjacent.
Les opérateurs logiques peuvent être "and" pour et, "only" pour uniquement et "not" pour non. Pour obtenir l'équivalent du ou, il suffit d'énumérer différentes media queries à la suite, séparées par des virgules : si l'une d'entre elles est valable, alors l'ensemble de la règle sera appliquée.
En général, on combine ensemble un type de média (screen, all...) et une expression grâce à and, bien qu'une expression seule puisse être utilisée. L'expression est toujours écrite entre parenthèses
ATTENTION ! De bien respecter les espaces !!
/* fond par défaut */
body{background-color:pink;}
/* fond rouge pour les médias de largeur maximum à 1280px */
@media screen and (max-width:1280px) {
body{background-color:red;}
}
/* fond vert pour les médias de largeur maximum à 800px */
@media screen and (max-width:800px) {
body{background-color:green;}
}
/* fond jaune pour les médias de largeur maximum à 550px */
@media screen and (max-width:550px) {
body{background-color:yellow;}
}