Règle @media CSS

Définition et utilisation

La règle @media dans les requêtes de média est utilisée pour appliquer différents styles aux types de média ou aux appareils différents.

Les requêtes de média peuvent être utilisées pour vérifier de nombreuses choses, telles que :

  • Largeur et hauteur de la fenêtre d'affichage
  • Largeur et hauteur de l'appareil
  • Orientation (l'appareil est-il en mode paysage ou portrait sur un téléphone ou une tablette ?)
  • Résolution

L'utilisation des requêtes de média est une technique populaire pour fournir des feuilles de style personnalisées aux ordinateurs de bureau, ordinateurs portables, tablettes et téléphones (conception de site web responsive).

Vous pouvez également utiliser les requêtes de média pour définir des styles qui ne s'appliquent qu'aux documents d'impression ou aux lecteurs d'écran (mediatype : print, screen ou speech).

En plus des types de média, il y a des caractéristiques des médias. Les caractéristiques des médias fournissent plus de détails spécifiques aux requêtes de média en permettant de tester les caractéristiques spécifiques de l'agent utilisateur ou de l'appareil d'affichage. Par exemple, vous pouvez appliquer des styles uniquement aux écrans plus larges ou plus étroits qu'une largeur spécifique.

Veuillez également consulter :

Tutoriel CSS :Requête média CSS

Tutoriel CSS :Exemples de requêtes de média CSS

Tutoriel RWD :Mettre en œuvre un design Web réactif à l'aide de requêtes de média

Guide de référence JavaScript :Méthode window.matchMedia()

Instance

Exemple 1

Si la largeur de la fenêtre du navigateur est de 600px ou moins, changez la couleur de fond de l'élément <body> en 'bleu clair' :

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Essayer par vous-même

Vous trouverez plus d'exemples TIY en bas de la page.

Grammaire CSS

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  Code CSS;
}

Signification des mots-clés 'not', 'only' et 'and' :

not : le mot-clé 'not' inverse le sens de l'ensemble de la requête de média.

only : le mot-clé 'only' empêche les navigateurs anciens de s'appliquer aux styles spécifiés, qui ne supportent pas les requêtes de média avec des caractéristiques de média. Il n'a pas d'effet sur les navigateurs modernes.

and : le mot-clé 'and' combine les caractéristiques des médias avec les types de médias ou d'autres caractéristiques des médias.

Ils sont tous optionnels. Cependant, si vous utilisez 'not' ou 'only', vous devez également spécifier le type de média.

Vous pouvez également utiliser des feuilles de style différentes pour différents médias, comme ceci :

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
....

Type de média

Valeur Description
all Par défaut. Utilisé pour tous les types de dispositifs de médias.
print Utilisé pour les imprimantes.
screen Utilisé pour les écrans d'ordinateur, les tablettes, les smartphones, etc.
speech Liseur d'écran utilisé pour lire la page.

Caractéristiques des médias

Valeur Description
any-hover

Est-ce qu'il existe tout mécanisme d'entrée disponible permettant à l'utilisateur de rester suspendu sur un élément (comme la souris) ?

Ajouté dans les Media Queries Level 4.
any-pointer

Est-ce qu'il existe tout dispositif de pointeur dans les mécanismes d'entrée disponibles, et si oui, quelle est sa précision ?

Ajouté dans les Media Queries Level 4.
ratio d'aspect Le rapport largeur/hauteur du viewport (vue portative).
color

Le nombre de bits par pixel de l'appareil de sortie, couramment 8, 16, 32 bits.

Cette valeur est 0 si l'appareil ne supporte pas l'output couleur.
color-gamut

La gamme de couleurs supportée approximativement par l'agent utilisateur et l'appareil de sortie.

Ajouté dans les Media Queries Level 4.
color-index

Le nombre d'entrées dans la table de recherche de couleurs (color lookup table) de l'appareil de sortie.

Cette valeur est 0 si l'appareil ne utilise pas de table de recherche de couleurs.
device-aspect-ratio

Le rapport largeur/hauteur de l'appareil de sortie.

Déprécié dans Media Queries Level 4.
device-height

La hauteur de la surface de rendu de l'appareil de sortie (comme l'écran).

Déprécié dans Media Queries Level 4.
device-width

La largeur de la surface de rendu de l'appareil de sortie (comme l'écran).

Déprécié dans Media Queries Level 4.
display-mode

Le mode d'affichage de l'application, tel que spécifié par le membre display du manifest web app.

Défini dans la spécification Web App Manifest.
forced-colors

Est-ce que l'agent utilisateur restreint le panneau de couleurs?

Ajouté dans les Media Queries Level 5.
grid Est-ce que l'appareil de sortie utilise un écran à mailles ou un écran à cristaux liquides?
height La hauteur du viewport (vue portative).
hover

Est-ce que le mécanisme d'entrée principal permet à l'utilisateur de faire glisser le curseur sur l'élément?

Ajouté dans les Media Queries Level 4.
inverted-colors

Est-ce que le navigateur ou le système d'exploitation de bas niveau a inversé les couleurs?

Ajouté dans les Media Queries Level 5.
light-level

Le niveau actuel de luminosité de l'environnement.

Ajouté dans les Media Queries Level 5.
max-aspect-ratio La proportion maximale de largeur et de hauteur de la zone d'affichage.
max-color Le nombre maximum de bits pour chaque composante de couleur sur l'appareil de sortie.
max-color-index Le nombre maximum de couleurs que l'appareil peut afficher.
max-height La hauteur maximale de la zone d'affichage, par exemple, une fenêtre de navigateur.
max-monochrome Le nombre maximum de bits pour chaque "couleur" sur un appareil monochrome (grayscale).
max-resolution La résolution maximale de l'appareil, exprimée en dpi ou dpcm.
max-width La largeur maximale de la zone d'affichage, par exemple, une fenêtre de navigateur.
min-aspect-ratio La proportion minimale de largeur et de hauteur de la zone d'affichage.
min-color Le nombre minimum de bits pour chaque composante de couleur sur l'appareil de sortie.
max-color-index Le nombre maximum de couleurs que l'appareil peut afficher.
min-height La hauteur minimale de la zone d'affichage, par exemple, une fenêtre de navigateur.
min-monochrome Le nombre minimum de bits pour chaque "couleur" sur un appareil monochrome (grayscale).
min-resolution La résolution minimale de l'appareil, exprimée en dpi ou dpcm.
min-width La largeur minimale de la zone d'affichage, par exemple la fenêtre du navigateur.
monochrome

La profondeur de bits de chaque pixel dans le tampon de couleur monochrome de l'appareil de sortie.

Si l'appareil n'est pas un écran noir et blanc, cette valeur est 0.
orientation La direction de rotation de la fenêtre (mode paysage ou portrait).
overflow-block

Comment l'appareil de sortie traite le contenu en déborder de l'viewport (viewport) suivant l'axe en bloc.

Ajouté dans les Media Queries Level 4.
overflow-inline

Le contenu en déborder de l'viewport (viewport) suivant l'axe en ligne peut-il être déroulé ?

Ajouté dans les Media Queries Level 4.
pointer

Est-ce que le mécanisme principal d'entrée est un dispositif de pointeur ? Si oui, quelle est sa précision ?

Ajouté dans les Media Queries Level 4.
prefers-color-scheme

Le utilisateur préfère-t-il une palette de couleurs claires ou sombres ?

Ajouté dans les Media Queries Level 5.
prefers-contrast

Détection de la demande de l'utilisateur pour augmenter ou réduire la contraste entre les couleurs proches.

Ajouté dans les Media Queries Level 5.
prefers-reduced-motion

Le utilisateur souhaite-t-il que le site web présente moins d'effets dynamiques ?

Ajouté dans les Media Queries Level 5.
prefers-reduced-transparency

Le utilisateur préfère-t-il une transparence réduite ?

Ajouté dans les Media Queries Level 5.
resolution La résolution de l'appareil de sortie, exprimée en dpi ou dpcm.
scan Le processus de balayage de l'appareil de sortie (par exemple, pour la télévision).
scripting

Détection de la disponibilité du scripting (par exemple JavaScript).

Ajouté dans les Media Queries Level 5.
update

La fréquence à laquelle l'appareil de sortie met à jour le rendu du contenu.

Ajouté dans les Media Queries Level 4.
width La largeur de la fenêtre (viewport).

Plus d'exemples

Exemple 2

Cacher l'élément lorsque la largeur du navigateur est de 600px ou moins :

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Essayer par vous-même

Exemple 3

Si la largeur de l'viewport est de 800 pixels ou plus large, utilisez la requête média pour définir la couleur de fond en lavande; si la largeur de l'viewport est comprise entre 400 et 799 pixels, utilisez la requête média pour définir la couleur de fond en vert clair. Si l'viewport est inférieur à 400 pixels, la couleur de fond sera verte claire :

body {
  background-color: lightblue;
}
@media screen and (min-width: 400px) {
  body {
    background-color: lightgreen;
  }
}
@media screen and (min-width: 800px) {
  body {
    background-color: lavender;
  }
}

Essayer par vous-même

Exemple 4

Créez un menu de navigation responsive (affiché horizontalement sur les écrans grands et verticalement sur les écrans petits) :

@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

Essayer par vous-même

Exemple 5

Utilisez des requêtes média pour créer une mise en page de colonnes responsive :

/* De quatre colonnes à deux colonnes sur les écrans de 992 pixels ou moins */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* Sur les écrans de largeur inférieure ou égale à 600 pixels, alignez les colonnes en colonne au lieu de les aligner côte à côte */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Essayer par vous-même

Exemple 6

Utilisez des requêtes média pour créer un site web responsive :

Essayer par vous-même

Exemple 7

Les requêtes média peuvent également être utilisées pour modifier la mise en page de la page en fonction de l'orientation du navigateur. Vous pouvez écrire un ensemble d'attributs CSS qui ne s'appliquent qu'au navigateur lorsque la largeur de la fenêtre est supérieure à sa hauteur (c'est-à-dire en mode paysage).

Utilisez une couleur de fond de teinte bleue claire si l'orientation est en mode paysage :

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

Essayer par vous-même

Exemple 8

Utilisez une requête média pour définir la couleur du texte en vert pour l'affichage du document sur l'écran et en noir pour l'impression :

@media screen {
  body {
    color: green; 
  }
}
@media print {
  body {
    color: black; 
  }
}

Essayer par vous-même

Exemple 9

Liste séparée par des virgules : utilisez une virgule pour ajouter une autre requête média à une requête média existante (comme un opérateur OR) :

/* Modifiez l'apparence de <div> lorsque la largeur est comprise entre 600px et 900px ou supérieure à 1100px */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

Essayer par vous-même

Support du navigateur

Les nombres dans le tableau indiquent la version du navigateur la plus ancienne prise en charge par les règles @media.

Chrome IE / Edge Firefox Safari Opera
21 9 3.5 4.0 9