CSS Requêtes Média
Requêtes Média CSS
Les requêtes média CSS permettent d'appliquer des styles en fonction des caractéristiques d'un appareil ou de l'environnement affichant la page web.
Elles sont essentielles pour créer des pages web réactives.
La règle CSS @media est utilisée pour ajouter des requêtes média à votre feuille de style.
Syntaxe des Requêtes Média
Une requête média se compose d'un type de média optionnel et d'une ou plusieurs caractéristiques de média, qui peuvent être vraies ou fausses.
@media [not] type-de-média and ( caractéristique-de-média: valeur ) and ( caractéristique-de-média: valeur ) {
/* Règles CSS à appliquer */
} Le type de média est optionnel. Cependant, si vous utilisez not , vous devez également spécifier un type de média.
Le résultat d'une requête média est vrai si le type de média spécifié correspond au type d'appareil, et si toutes les caractéristiques de média sont vraies. Lorsqu'une requête média est vraie, les règles de style correspondantes sont appliquées, suivant les règles de cascade normales.
Signification des mots-clés not et and :
not: Ce mot-clé optionnel inverse le sens de l'ensemble de la requête média.
and: Ce mot-clé combine un type de média et une ou plusieurs caractéristiques de média.
Types de Média CSS
Le type de média optionnel spécifie le type de média pour lequel les styles sont destinés. Si le type de média est omis, il sera défini sur "all".
| Valeur | Description |
|---|---|
| all | Utilisé pour tous les appareils de type média |
| Utilisé pour le mode d'aperçu avant impression | |
| screen | Utilisé pour les écrans d'ordinateur, les tablettes et les smartphones |
Caractéristiques de Média CSS
La caractéristique de média spécifie une caractéristique spécifique de l'appareil.
Voici quelques caractéristiques de média couramment utilisées :
| Valeur | Description |
|---|---|
| max-height | Hauteur maximale de la fenêtre d'affichage |
| min-height | Hauteur minimale de la fenêtre d'affichage |
| height | Hauteur de la fenêtre d'affichage (y compris la barre de défilement) |
| max-width | Largeur maximale de la fenêtre d'affichage |
| min-width | Largeur minimale de la fenêtre d'affichage |
| width | Largeur de la fenêtre d'affichage (y compris la barre de défilement) |
| orientation | Orientation de la fenêtre d'affichage (paysage ou portrait) |
| resolution | Résolution de l'écran |
| prefers-color-scheme | Schéma de couleurs préféré de l'utilisateur (clair ou sombre) |
Exemples de Requêtes Média
Dans cet exemple, nous utilisons une requête média pour changer la couleur de fond du corps en vert clair si la largeur de la fenêtre d'affichage est de 480px ou plus :
Exemple
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Dans cet exemple, nous utilisons une requête média pour changer la couleur de fond du corps en vert clair si la largeur de la fenêtre d'affichage est comprise entre 480px et 768px :
Exemple
@media screen and (min-width: 480px) and (max-width: 768px) {
body {
background-color: lightgreen;
}
}
Plus d'Exemples de Requêtes Média
Pour plus d'exemples sur les requêtes média, allez à la page suivante : Exemples de MQ CSS .