CSS Requêtes Média - Exemples
Exemples de Requêtes Média CSS
Les requêtes média sont une technique populaire pour fournir une feuille de style adaptée à différents appareils.
Pour illustrer un exemple simple, nous pouvons changer la couleur de fond selon les appareils :
Exemple
Utilisez des requêtes média pour changer la couleur de fond en fonction des différentes largeurs de viewport :
/* Style de base pour les appareils mobiles */
body {
background-color: olive;
color: white;
}
/* Pour les appareils avec une largeur minimale de 768px (Moyen) */
@media screen and (min-width: 768px) {
body {
background-color: blue;
color: white;
}
}
/* Pour les appareils avec une largeur minimale de 992px (Grand) */
@media screen and (min-width: 992px) {
body {
background-color: tan;
color: black;
}
}
Requêtes Média pour les Colonnes
Une utilisation courante des requêtes média est de créer une mise en page flexible. Dans cet exemple, nous créons une mise en page qui varie entre quatre, deux et des colonnes pleine largeur, en fonction des différentes tailles d'écran :
Grands écrans :
Écrans moyens :
Petits écrans :
Exemple
* {
box-sizing: border-box;
}
/* Conteneur pour les flexbox */
.container {
display: flex;
flex-wrap: wrap;
}
/* Créer quatre colonnes égales */
.column {
flex: 25%;
padding: 20px;
}
/* Sur les écrans de 992px de large ou moins, passer de quatre colonnes à deux colonnes */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* Sur les écrans de 600px de large ou moins, empiler les colonnes les unes sur les autres au lieu de les mettre côte à côte */
@media screen and (max-width: 600px) {
.container {
flex-direction: column;
}
}
Pour en savoir plus sur le module de mise en page Flexible Box, lisez notre chapitre sur CSS Flexbox .
Pour en savoir plus sur le design web réactif, lisez notre tutoriel sur le design web réactif .
Requêtes Média pour les Menus
Ici, nous utilisons des requêtes média pour créer un menu de navigation réactif, dont le design varie selon les différentes tailles d'écran.
Exemple
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333333;
display: flex;
}
ul li a {
display: block;
color: white;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #111111;
}
/* Pour une largeur de viewport de 600px ou moins, empiler les liens du menu les uns sur les autres */
@media screen and (max-width: 600px) {
ul {flex-direction: column;}
} Cacher des Éléments avec des Requêtes Média
Ici, nous utilisons des requêtes média pour cacher un élément sur les petits écrans :
Exemple
/* Cacher l'élément si la largeur du viewport est de 600px ou moins */
@media screen and (max-width: 600px) {
#div1 {
display: none;
}
}
Changer la Taille de la Police avec des Requêtes Média
Ici, nous utilisons des requêtes média pour changer la taille de la police d'un élément selon les différentes largeurs de viewport :
Exemple
/* Si la largeur du viewport est de 600px ou plus, définir la taille de la police à 80px */
@media screen and (min-width: 600px) {
#div1 {
font-size: 80px;
}
}
Requêtes Média pour l'Orientation de l'Écran
Les requêtes média peuvent également être utilisées pour changer la mise en page d'une page en fonction de l'orientation de l'écran.
Ici, nous changeons la couleur de fond du corps si l'orientation de l'écran est en mode paysage :
Exemple
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
} Requêtes Média pour les Préférences Utilisateur
Certains utilisateurs ont une sensibilité au mouvement et préfèrent les sites web avec moins d'animations.
La fonctionnalité média prefers-reduced-motion vous permet de vérifier si un utilisateur a demandé à réduire le mouvement, comme les animations ou les transitions. Utilisez cette fonctionnalité pour désactiver les animations et les transitions pour les utilisateurs qui ont activé ce paramètre sur leur ordinateur :
Exemple
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
} Galerie d'Images Réactive
Ici, nous utilisons des requêtes média avec flexbox pour créer une galerie d'images réactive :
Exemple
Site Web Réactif
Ici, nous utilisons des requêtes média avec flexbox pour créer un site web réactif :
Exemple
Design Web Réactif CSS
Pour en savoir plus sur le design web réactif, lisez notre Tutoriel sur le Design Web Réactif .