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>

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>

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.

Support de Navigateurs

1.0+ 1.0+ 1.3+ 9.2+


Trouvez-vous cela utile?

Articles Associées