Les médias queries sont utilisés pour accomplir le responsive design (RWD), ils nous permettent de modifier l'apparance de notre page en fonction du type d'appareil et de la résolution d'écran ou simplement de la largeur de la zone d'affichage (viewport).
/* PAR EXEMPLE */
@media (min-width: 480px) { ... }
@media (min-width: 960px) and (max-width: 1200px) { ... }Par exemple, cette requête média teste si l'appareil est de type écran et si la viewport (fenêtre de visualisation) a au moins 600px de large. Le CSS du sélecteur .contenu ne sera appliqué que si ces deux éléments sont vrais.
@media screen and (min-width: 600px) {
.contenu {
width: 300px;
margin: 0 auto;
}
}Comme on peut ajouter plusieurs média queries, on continue a tester et changer l'affichage du sélecteur .contenu, dans cet exemple on l'élarge.
@media screen and (min-width: 900px) {
.contenu {
width: 600px;
margin: 0 auto;
}
}Dans cet exemple, si l'utilisateur a un écran de taille d'au moins 1200px on lui présente un titre plus grand.
html {
font-size: 14px;
}
h1 {
font-size: 2rem; /* 2rem pour dire 2 fois le font-size du element root(html) */
}
@media screen and (min-width: 1200px) {
h1 {
font-size: 4rem;
}
}Cette balise html doit être present pour que notre viewport soit pris en compte. Ajouter dans la section <head>.
<meta name="viewport" content="width=device-width,initial-scale=1">