Règle CSS @media

La règle @media spécifie un ensemble des styles appliqués seulement à certains types de média.

Les requêtes média sont une technique pour distribuer un site web adaptatif aux fond d'écrans, laptops, tablettes et portables.

En plus des types média, il y a des caractéristiques média qui ont des noms et acceptent certaines valeurs comme les propriétés. Mais il y a des différences entre les propriétés et les caractéristiques média:

Les propriétés ne peuvent pas afficher sans valeurs, et les caractéristiques ne demandent pas les valeurs.
À la différence des propriétés, les caractéristiques acceptent seulement les seules valeurs.

Les requêtes média sont utilisées pour vérifier les points suivants:

la largeur et la hauteur de la zone d'affichage
la largeur et la hauteur de l'appareil
orientation
résolution

Valeur initiale	all
Appliquée à	Certains types média.
Héritée	Non.
Animable	Oui.
Version	Media Queries, CSS2
Syntaxe DOM	object.style.@media = "screen and (min-width: 500px)";

Syntaxe

@media: media-type (and media-query-feature);

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body {
      background-color: #1c87c9;
      }
      @media screen and (max-width: 411px) {
      body {
      background-color: #cce5ff;
      }
      }
      @media screen and (min-width: 768px) {
      body {
      background-color: #eee;
      }
      }
      @media screen and (max-width: 962px) and (min-width: 450px), (min-width: 1366px) {
      background-color: #333;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la règle @media</h2>
    <p>Redimensionnez le navigateur pour voir l'effet.</p>
    <p>Les requêtes média définissent la couleur d'arrière-plan sur gris si la fenêtre d'affichage a une largeur de 600 pixels ou plus, sur vert si la fenêtre d'affichage a une largeur comprise entre 200 et 599 pixels. Si la fenêtre est inférieure à 200 pixels, la couleur d'arrière-plan est bleue.</p>
  </body>
</html>

Essayez-vous-même!

Dans l'exemple suivant, lorsque la largeur du navigateur est comprise entre 500 et 800 pixels ou supérieure à 1 000 pixels, l'apparence de <div> est modifié. Redimensionnez la fenêtre du navigateur pour voir l'effet.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body {
      background-color: #1c87c9;
      }
      @media screen and (min-width: 200px) {
      body {
      background-color: #8ebf42;
      }
      }
      @media screen and (min-width: 600px) {
      body {
      background-color: #ccc;
      }
      }
      @media screen and (max-width: 800px) and (min-width: 500px), (min-width: 1000px) {
      div.box {
      font-size: 50px;
      padding: 50px;
      border: 8px solid #000;
      background: #eee;
      }
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la règle @media</h2>
    <p>Les requêtes média définissent la couleur d'arrière-plan sur gris si la fenêtre d'affichage a une largeur de 600 pixels ou plus, sur vert si la fenêtre d'affichage a une largeur comprise entre 200 et 599 pixels. Si la fenêtre est inférieure à 200 pixels, la couleur d'arrière-plan est bleue.</p>
    <h3>Changer l'apparence de DIV sur différentes tailles d'écran.</h3>
    <div class="box">DIV</div>
  </body>
</html>

Essayez-vous-même!

Types média

Valeur	Description
all	Cette valeur est utilisée pour des appareils. C'est la valeur initiale de cette propriété.
print	Utilisée pour les appareils imprimeurs.
screen	Utilisée pour des écrans de l'ordinateur.
speech	Utilisée pour les haut-parleurs.
initial	Fait la propriété utiliser sa valeur initiale.
inherit	Hérite la propriété de son élément parent.

Caractéristiques média

Valeur	Description
width	La largeur de la zone d'affichage. css2
height	La hauteur de la zone d'affichage.
orientation	L'orientation de la zone d'affichage.
scan	Le scan de la zone d'affichage.
aspect-ratio	Rapport entre la valeur de la fonctionnalité de média "width" et la valeur de la fonctionnalité de média "height".
grid	Demande si le périphérique de sortie est une grille ou un bitmap.
color	Nombre de bits par composant de couleur du périphérique de sortie. Si l'appareil n'a pas de couleur, la valeur est 0.
color-gamut	Gamme de couleurs approximative prise en charge par l'agent utilisateur et le périphérique de sortie.
color-index	Définit le nombre d'entrées dans la table de recherche de couleur du périphérique de sortie. Si le périphérique n'utilise pas la recherche de couleur, la valeur est 0.
inverted-colors	Demande si le navigateur ou le système d'exploitation sous-jacent inverse ou non les couleurs.
hover	Demande si le mécanisme de saisie principal permet à l'utilisateur de survoler des éléments ou non.
any-hover	Demande si le mécanisme de saisie disponible permet à l'utilisateur de survoler des éléments ou non.
any-pointer	Demande si le mécanisme de saisie disponible est un périphérique de pointage ou non.
light-level	Le niveau de lumière des environnements.
max-aspect-ratio	Le rapport maximum entre la largeur et la hauteur de la zone d'affichage.
max-color	Nombre maximal de bits par composant de couleur pour le périphérique de sortie.
max-color-index	Le nombre maximum de couleurs pour l'affichage.
max-height	La hauteur maximale de la zone d'affichage.
max-monochrome	Le nombre maximal de bits par couleur sur un périphérique monochrome.
max-resolution	La résolution maximale de l'appareil.
max-width	La largeur maximale de la zone d'affichage.
min-aspect-ratio	Le rapport minimum entre la largeur et la hauteur de la zone d'affichage.
min-color	Nombre minimal de bits par composant de couleur pour le périphérique de sortie.
min-color-index	Le nombre minimum de couleurs pour l'affichage.
min-height	La hauteur minimale de la zone d'affichage.
min-monochrome	Le nombre minimum de bits par couleur sur un périphérique monochrome.
min-resolution	La résolution minimale de l'appareil.
min-width	La largeur minimale de la zone d'affichage.
monochrome	Définit le nombre de bits par pixel dans un tampon de trame monochrome. Si le périphérique n'est pas monochrome, la valeur est 0.
orientation	L'orientation de la zone d'affichage.
overflow-block	Demande comment le périphérique de sortie traite le contenu qui dépasse de la fenêtre d'affichage le long de l'axe du bloc.
overflow-inline	Recherche si le contenu qui dépasse de la fenêtre le long de la fenêtre d'affichage peut faire défiler ou non.
pointer	Demande si le mécanisme d'entrée principal est un périphérique de pointage ou non.
resolution	Décrit la résolution du périphérique de sortie.
scripting	Demande si le script est disponible ou non.
update	Demande à quelle vitesse le périphérique de sortie peut modifier l'apparence du contenu.