Requêtes média CSS

CSS2 a introduit les types de média

CSS2 a introduit @media Les règles qui permettent de définir des règles de style différentes pour différents types de médias.

Par exemple : vous pourriez avoir un ensemble de règles de style pour les écrans d'ordinateur, un ensemble pour les imprimantes, un ensemble pour les appareils portables, et même un ensemble pour les téléviseurs, etc.

Malheureusement, à l'exception du type de média d'impression, ces types de média n'ont jamais été largement pris en charge par les appareils.

CSS3 introduit les enquêtes média

Les enquêtes média CSS3 étendent le concept des types de média CSS2 : elles ne recherchent pas le type d'appareil, mais se concentrent sur les capacités de l'appareil.

Les enquêtes média peuvent être utilisées pour vérifier de nombreuses choses, par exemple :

  • Largeur et hauteur de la fenêtre de visualisation
  • Largeur et hauteur de l'appareil
  • Orientation (l'appareil est en mode paysage ou portrait sur les tablettes et les smartphones)
  • Résolution

L'utilisation des enquêtes média est une technologie populaire qui permet de fournir des feuilles de style personnalisées pour les ordinateurs de bureau, les ordinateurs portables, les tablettes et les téléphones mobiles (par exemple, iPhone et smartphones Android).

Prise en charge du navigateur

Les nombres dans le tableau indiquent la prise en charge complète @media Première version du navigateur prise en charge par la règle.

Attribut
@media 21.0 9.0 3.5 4.0 9.0

Syntaxe de l'enquête média

Une enquête média se compose d'un type de média et peut inclure une ou plusieurs expressions, qui peuvent être interprétées comme true ou false.

@media not|only mediatype and (expressions) {
  CSS-Code;
}

Si le type de média spécifié correspond au type de périphérique du document en cours d'affichage et que toutes les expressions de l'enquête média sont true, le résultat de l'enquête est true. Lorsque l'enquête média est true, l'ensemble des feuilles de style ou des règles de style correspondantes est appliqué, en suivant les règles normales de cascade.

À moins que vous ne utilisiez les opérateurs not ou only, le type de média est optionnel et implicite, all Type.

Vous pouvez également utiliser des feuilles de style différentes pour différents types de média :

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

Types de média CSS3

Valeur Description
all Pour tous les types de périphériques de média.
print Pour les imprimantes.
screen Pour les écrans d'ordinateur, les tablettes, les smartphones, etc.
speech Pour les lecteurs d'écran qui lisent à haute voix la page.

Exemple simple d'enquête média

L'une des méthodes pour utiliser une enquête média consiste à avoir une section CSS alternative dans la feuille de style.

L'exemple suivant change la couleur de fond en vert pâle lorsque la largeur de la fenêtre de visualisation est de 480 pixels ou plus (si la largeur de la fenêtre de visualisation est inférieure à 480 pixels, la couleur de fond sera rose) :

Exemple

@media screen and (largeur-min: 480px) {
  body {
    background-color: lightgreen;
  }
}

Essayez-le vous-même

L'exemple suivant affiche un menu, qui flotte à gauche de la page si la largeur de la fenêtre de visualisation est de 480 pixels ou plus (si la largeur de la fenêtre de visualisation est inférieure à 480 pixels, le menu se trouve au sommet du contenu) :

Exemple

@media screen and (largeur-min: 480px) {
  #leftsidebar {largeur: 200px; flot: gauche;}
  #main {marge-gauche: 216px;}
}

Essayez-le vous-même

Plus d'exemples de requêtes média

Pour plus d'exemples de requêtes média, veuillez visiter la page suivante :Exemple MQ CSS.

Manuel de référence @media CSS

Pour une vue d'ensemble complète de tous les types de média et des caractéristiques/expresions, veuillez consulter notre Règle @media dans la référence CSS.