CSSRequêtes médias


Syntaxe

  • @media [pas | seulement] mediatype et (fonction média) {/ * Règles CSS à appliquer * /}

Paramètres

Paramètre Détails
mediatype (Facultatif) C'est le type de support. Pourrait être n'importe quoi dans la gamme de all à l' screen .
not (Facultatif) N'applique pas le CSS pour ce type de média particulier et s'applique à tout le reste.
media feature Logique pour identifier les cas d'utilisation pour CSS. Options décrites ci-dessous.
Fonction média Détails
aspect-ratio Décrit le rapport d'aspect de la zone d'affichage ciblée du périphérique de sortie.
color Indique le nombre de bits par composant couleur du périphérique de sortie. Si le périphérique n'est pas un périphérique couleur, cette valeur est égale à zéro.
color-index Indique le nombre d'entrées dans la table de couleurs pour le périphérique de sortie.
grid Détermine si le périphérique de sortie est un périphérique de grille ou un périphérique bitmap.
height La fonction de support de hauteur décrit la hauteur de la surface de rendu du périphérique de sortie.
max-width CSS ne s'appliquera pas sur une largeur d'écran supérieure à celle spécifiée.
min-width CSS ne s'appliquera pas sur une largeur d'écran inférieure à celle spécifiée.
max-height CSS ne s'appliquera pas à une hauteur d'écran plus grande que celle spécifiée.
min-height CSS ne s'appliquera pas sur une hauteur d'écran plus courte que celle spécifiée.
monochrome Indique le nombre de bits par pixel sur un périphérique monochrome (échelle de gris).
orientation CSS affichera uniquement si le périphérique utilise l'orientation spécifiée. Voir les remarques pour plus de détails.
resolution Indique la résolution (densité de pixels) du périphérique de sortie.
scan Décrit le processus de numérisation des périphériques de sortie de télévision.
width La fonctionnalité de support de largeur décrit la largeur de la surface de rendu du périphérique de sortie (telle que la largeur de la fenêtre du document ou la largeur du bloc de page sur une imprimante).
Fonctionnalités obsolètes Détails
device-aspect-ratio Deprecated CSS Deprecated ne s'affichent que sur les appareils dont le rapport hauteur / largeur correspond au ratio spécifié. Ceci est une fonctionnalité deprecated et il n'est pas garanti que cela fonctionne.
max-device-width Deprecated Même que max-width mais mesure la largeur de l'écran physique, plutôt que la largeur d'affichage du navigateur.
min-device-width Deprecated Même que min-width mais mesure la largeur de l'écran physique plutôt que la largeur d'affichage du navigateur.
max-device-height Deprecated Même que max-height mais mesure la largeur de l'écran physique plutôt que la largeur d'affichage du navigateur.
min-device-height Deprecated Même que min-height mais mesure la largeur de l'écran physique, plutôt que la largeur d'affichage du navigateur.

Remarques

Les requêtes multimédias sont prises en charge dans tous les navigateurs modernes, y compris Chrome, Firefox, Opera et Internet Explorer 9 et versions ultérieures.


Il est important de noter que la fonction de support d' orientation n'est pas limitée aux périphériques mobiles. Il est basé sur la largeur et la hauteur de la fenêtre d'affichage (pas la fenêtre ou les périphériques).

Le mode Paysage est utilisé lorsque la largeur de la fenêtre d'affichage est supérieure à la hauteur de la fenêtre d'affichage.

Le mode Portrait est utilisé lorsque la hauteur de la fenêtre d'affichage est supérieure à la largeur de la fenêtre d'affichage.

Cela se traduit généralement par un moniteur de bureau en mode paysage, mais peut-il parfois être portrait.


Dans la plupart des cas, les appareils mobiles signaleront leur résolution et non leur taille réelle en pixels, qui peut différer en raison de la densité des pixels. Pour les forcer à déclarer leur taille réelle de pixels ajouter les éléments suivants dans votre head tag:

<meta name="viewport" content="width=device-width, initial-scale=1">


Requêtes médias Exemples Liés