W3docs
fr
Se connecter

Règle CSS @media

Utilisez la règle @media pour appliquer des styles selon des media queries. Apprenez à l'utiliser grâce à des exemples pratiques.

La règle at-rule @media applique un bloc de styles uniquement lorsqu'une media query est évaluée à vrai — par exemple, uniquement sur des écrans plus étroits qu'un téléphone, ou uniquement lorsqu'un document est imprimé. C'est le fondement du design web responsive : une seule feuille de style qui s'adapte aux ordinateurs de bureau, aux laptops, aux tablettes et aux téléphones mobiles, au lieu de livrer un site distinct pour chaque appareil.

Cette page couvre la syntaxe de @media, les types de médias et les fonctionnalités de médias disponibles, comment combiner des conditions avec des opérateurs logiques, et des exemples interactifs que vous pouvez redimensionner pour observer l'effet.

Comment une media query est construite

Une media query comporte deux parties :

  • Un type de média optionnel — all, print, screen, ou speech — qui cible une catégorie de périphérique.
  • Une ou plusieurs fonctionnalités de médias entre parenthèses, comme (min-width: 768px), qui testent une condition telle que la width du viewport, sa height, l'orientation ou la résolution.

Si le type de média correspond à l'appareil actuel et que chaque fonctionnalité est évaluée à vrai, les styles à l'intérieur du bloc s'appliquent. Une fonctionnalité de média ressemble à une propriété CSS (name: value), mais elle teste une condition plutôt que de styliser un élément directement.

Quand utiliser ceci ? Dès que vous souhaitez que la mise en page, l'espacement ou la visibilité changent selon l'appareil — empiler des colonnes sur les téléphones, masquer une barre latérale sur les petits écrans, ou supprimer les couleurs d'arrière-plan lors de l'impression d'une page.

En JavaScript, l'interface CSSMediaRule représente une règle @media individuelle et peut être utilisée pour lire ou modifier des règles créées avec @media.

Syntaxe

CSS @media

@media <media-query> {
  /* styles */
}

Les media queries peuvent combiner plusieurs conditions en utilisant des opérateurs logiques : and, not, only, et une virgule (,).

Exemple de la règle @media :

CSS @media code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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) {
        body {
          background-color: #333;
        }
      }
    </style>
  </head>
  <body>
    <h2>@media rule example</h2>
    <p>Resize the browser to see the effect.</p>
    <p>The background color changes based on the viewport width: light blue for screens up to 411px, light gray for 768px and wider, and dark gray for screens between 450px and 962px, or 1366px and wider.</p>
  </body>
</html>
Essayez vous-même »

Résultat

CSS @media plusieurs requêtes

Dans l'exemple suivant, lorsque la largeur du navigateur est comprise entre 500 et 800 px ou au-dessus de 1000 px, l'apparence du <div> change. Redimensionnez la fenêtre du navigateur pour voir l'effet.

Exemple de la règle @media avec un changement d'apparence de <div> :

CSS @media multiple queries example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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>@media rule example</h2>
    <p>Media queries set the background-color to grey if the viewport is 600 pixels wide or wider, to green if the viewport is between 200 and 599 pixels wide. If the viewport is smaller than 200 pixels, the background-color is blue.</p>
    <h3>Change the appearance of DIV on different screen sizes</h3>
    <div class="box">DIV</div>
  </body>
</html>
Essayez vous-même »

Combiner des conditions avec des opérateurs logiques

Les media queries peuvent enchaîner plusieurs conditions :

  • and — toutes les conditions doivent être vraies : @media screen and (min-width: 768px).
  • , (virgule) — agit comme or ; les styles s'appliquent si n'importe quelle requête séparée par une virgule correspond : @media (max-width: 600px), (min-width: 1200px).
  • not — nie une requête entière : @media not all and (monochrome).
  • only — masque la requête aux très anciens navigateurs qui ne comprennent pas les fonctionnalités de médias ; cela n'a aucun effet dans les navigateurs modernes mais son inclusion est sans danger.

Types de médias

ValeurDescription
allCette valeur est utilisée pour tous les appareils. C'est la valeur par défaut de cette propriété.
printUtilisé pour les imprimantes.
screenUtilisé pour les écrans d'ordinateur couleur.
speechUtilisé pour les haut-parleurs.

Exemple d'utilisation de media pour masquer un élément sur les très petits appareils :

CSS @media Rule

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <style>
      @media (max-width: 767px) {
        .hide-mobile {
          display: none;
        }
      }
    </style>
  </head>
  <body>
    <h1>Hi</h1>
    <p>There is some text for example.</p>
    <p class="hide-mobile">This text will be hidden on large devices.</p>
    <p>There is some text for example.</p>
  </body>
</html>
Essayez vous-même »

Exemple d'utilisation de media pour changer la couleur d'arrière-plan du contenu selon les appareils.

CSS @media Rule

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @media screen and (max-width: 767px) {
        .content {
          background-color: lightblue;
          padding: 30px;
        }
      }
      @media screen and (min-width: 768px) {
        .content {
          background-color: pink;
          padding: 10px;
        }
      }
      @media screen and (min-width: 800px) {
        .content {
          background-color: lightgreen;
          color: white;
          padding: 50px;
        }
      }
    </style>
  </head>
  <body>
    <div class="content">
      <h2>Resize the browser to see the effect.</h2>
      <p>
        CSS is a rule-based language, which means that you define
        rules specifying groups of styles applying to particular
        elements or groups of elements on the web page.
      </p>
    </div>
  </body>
</html>
Essayez vous-même »

Fonctionnalités de médias

Les fonctionnalités de médias testent une caractéristique spécifique de l'appareil ou du viewport. Les plus courantes dans le design responsive quotidien sont les fonctionnalités basées sur la width — min-width et max-width — mais la liste complète ci-dessous couvre tout, de l'orientation de l'appareil à la profondeur des couleurs et au mécanisme de saisie. Les fonctionnalités de plage (width, height, aspect-ratio, color, resolution, monochrome) acceptent également les préfixes min- et max-.

ValeurDescription
widthLa largeur du viewport.
heightLa hauteur du viewport.
orientationL'orientation du viewport.
aspect-ratioLe rapport entre la valeur de la fonctionnalité de média "width" et la valeur de la fonctionnalité de média "height".
gridInterroge si le périphérique de sortie est de type grille ou bitmap.
colorLe nombre de bits par composante de couleur du périphérique de sortie. Si le périphérique n'est pas en couleur, la valeur est 0.
color-gamutLa gamme approximative de couleurs supportée par l'agent utilisateur et le périphérique de sortie.
inverted-colorsInterroge si le navigateur ou le système d'exploitation sous-jacent inverse les couleurs ou non.
hoverInterroge si le mécanisme de saisie principal permet à l'utilisateur de survoler des éléments ou non.
any-hoverInterroge si le mécanisme de saisie disponible permet à l'utilisateur de survoler des éléments ou non.
any-pointerInterroge si le mécanisme de saisie disponible est un dispositif de pointage ou non.
light-levelLe niveau de luminosité de l'environnement.
max-aspect-ratioLe rapport maximal entre la largeur et la hauteur de la zone d'affichage.
max-colorLe nombre maximum de bits par composante de couleur pour le périphérique de sortie.
max-heightLa hauteur maximale de la zone d'affichage.
max-monochromeLe nombre maximum de bits par couleur sur un périphérique monochrome.
max-resolutionLa résolution maximale du périphérique.
max-widthLa largeur maximale de la zone d'affichage.
min-aspect-ratioLe rapport minimal entre la largeur et la hauteur de la zone d'affichage.
min-colorLe nombre minimum de bits par composante de couleur pour le périphérique de sortie.
min-heightLa hauteur minimale de la zone d'affichage.
min-monochromeLe nombre minimum de bits par couleur sur un périphérique monochrome.
min-resolutionLa résolution minimale du périphérique.
min-widthLa largeur minimale de la zone d'affichage.
overflow-blockInterroge comment le périphérique de sortie gère le contenu qui déborde du viewport sur l'axe de bloc.
overflow-inlineInterroge si le contenu qui déborde du viewport sur l'axe en ligne peut être défilé ou non.
pointerInterroge si le mécanisme de saisie principal est un dispositif de pointage ou non.
resolutionDécrit la résolution du périphérique de sortie.
scriptingInterroge si les scripts sont disponibles ou non.
updateInterroge à quelle vitesse le périphérique de sortie peut modifier l'apparence du contenu.

Entraînement

Pratique
Quelles sont les fonctions des media queries en CSS ?
Quelles sont les fonctions des media queries en CSS ?
Was this page helpful?