Accueil > lettre M > Media Queries

Media Queries

Les Media Queries sont des spécifications de CSS3 qui permettent d'attribuer des propriétés CSS en fonction de conditions particulières (exemple : largeur de l'écran). Ces spécifications sont particulièrement connues pour leurs utilités dans la conception d'un responsive web design.

Exemple d'utilisation

Il est par exemple possible d'appliquer la couleur "noir" au texte lorsque le texte est imprimé et dans tous les autres cas de laisser le texte en rouge en utilisant le code suivant:

  1. body {
  2. color:red;
  3. }
  4. @media print {
  5. body {
  6. color:black;
  7. }
  8. }

Il est aussi possible de modifier la largeur d'un div si la fenêtre du navigateur est inférieur à 500px (méthode utilisé dans un responsive design). Pour cela il suffit de copier/coller le code suivant:

  1. #page {
  2. width:450px;
  3. }
  4. @media screen and (max-width: 500px) {
  5. #page {
  6. width:300px;
  7. }
  8. }

Critères

Les critères utilisés dans les Media Queries sont variés. La plupart de ces critères peuvent être préfixés par "min-" ou "max-" pour définir respectivement une valeur "minimum ou égale" ou "maximum ou égale". Ces critères sont les suivants:

  • Width : largeur de la zone d'affichage dans le navigateur
  • Height : hauteur de la zone d'affichage dans le navigateur
  • Device-width : largeur de l'écran de l'appareil
  • Device-height : hauteur de l'écran de l'appareil
  • Orientation : orientation de l'appareil (valeur possible : "portrait" ou "landscape").
  • Aspect-ratio : ratio de la zone d'affichage du navigateur (rapport "largeur" contre "hauteur"). La valeur est constituée de 2 entiers séparés par un slash (exemple : "16/9")
  • Device-aspect-ratio : ratio de l'écran de l'appareil (rapport "largeur" contre "hauteur"). La valeur est constituée de 2 entiers séparés par un slash (exemple : "16/9")
  • Color : nombre de bits par composante de couleur
  • Color-index : nombre d'entré dans la table de couleurs indexées
  • Monochrome : nombre de bits par pixels sur un périphérique monochrome (c'est-à-dire le niveau de gris). Si le périphérique utilise des couleurs, la valeur est zéro
  • Resolution : densité de pixels du périphérique. La valeur peut être définie en points par pouce (dpi) ou en points par centimètre (dpcm)
  • Scan : processus de balayage sur une télévision. Valeur possible "progressive" ou "interlace"
  • Grid : définit si l'appareil est un périphérique en grille ou bitmap

Compatibilité

Les media queries ne sont pas compatibles avec tous les navigateurs. Voici une liste résumant la compatibilité sur les principaux navigateurs web:

  • IE9+
  • Firefox 3.5+
  • Chrome 4+
  • Safari 4+
  • Opera 9.5+
  • iOS Safari 3.2+
  • Opera Mini 5+
  • Android Browser 2.1+
  • Opera Mobile 10+
  • Chrome pour Android 18+
  • Firefox pour Android 14+
Partager :
Faire un lien :

Glossaire du webmaster