API de MediaQueryList JavaScript

Recommandation de cours :

Attributs de MediaQueryList Objet MediaQueryList

Attributs de MediaQueryList L'objet stocke les informations provenant des requêtes média.estL'objet

Attributs de MediaQueryList L'objet peut être accédé de la manière suivante :

window.matchMedia() ou simplement matchMedia():

Exemple

const mqlObj = window.matchMedia();
const mqlObj = matchMedia();

Essayez-le vous-même

Voir également :

Méthode window.matchMedia()

Attribut MediaQueryList

Attribut Description
matches Valeur booléenne. Si le document correspond à la requête, alors true, sinon false.
media Valeur en chaîne. Requête média (liste).

Méthode MediaQueryList

Méthode Description
addListener() Ajoutez une nouvelle fonction d'écoute, qui sera exécutée à chaque fois que le résultat de l'évaluation de la requête média change.
removeListener()

Supprimez la fonction d'écoute précédemment ajoutée de la liste de requêtes média.

Si le détecteur spécifié n'est pas dans la liste, aucune action n'est effectuée.

Requête média

matchMedia() La méthode de requête média peut être Règle @media CSS de toute caractéristique de média, comme min-height, min-width, orientation, etc.

Exemple

matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);

Essayez-le vous-même

Type de média

Valeur Description
all Par défaut. Utilisé pour tous les types de périphériques de médias.
print Pour les imprimantes.
screen Pour les écrans d'ordinateur, les tablettes, les smartphones, etc.
speech Liseur d'écran pour lire à haute voix la page.

Caractéristiques des médias

Valeur Description
any-hover Y a-t-il un mécanisme d'entrée disponible qui permet à l'utilisateur de faire glisser la souris sur un élément ?
(Ajouté dans Media Queries Level 4).
any-pointer Y a-t-il un mécanisme d'entrée disponible, comme un pointeur, et si oui, quelle est son précision ?
(Ajouté dans Media Queries Level 4).
aspect-ratio Rapport largeur/hauteur de la vue.
color Nombre de bits pour chaque composante de couleur de l'appareil de sortie.
color-gamut Gamut de couleurs approximatif supporté par l'agent utilisateur et l'appareil de sortie
(Ajouté dans Media Queries Level 4)
color-index Nombre de couleurs que l'appareil peut afficher.
grid L'appareil est-il en grille ou en bitmap ?
height Hauteur de la vue.
hover L'interface d'entrée principale permet-elle à l'utilisateur de faire glisser le curseur sur l'élément ?
(Ajouté dans Media Queries Level 4)
inverted-colors Le navigateur ou le système d'exploitation de bas niveau inverse-t-il les couleurs ?
(Ajouté dans Media Queries Level 4).
light-level Niveau actuel du niveau de lumière de l'environnement (Ajouté dans Media Queries Level 4).
max-aspect-ratio Rapport largeur/hauteur maximal de la zone d'affichage.
max-color Nombre de bits maximum pour chaque composant de couleur de l'appareil de sortie.
max-color-index Nombre maximum de couleurs que l'appareil peut afficher.
max-height Hauteur maximale de la zone d'affichage, par exemple la fenêtre du navigateur.
max-monochrome Nombre de bits maximum pour chaque 'couleur' sur les appareils monochromes (gris).
max-resolution Résolution maximale de l'appareil, utilisant dpi ou dpcm.
max-width Largeur maximale de la zone d'affichage, par exemple la fenêtre du navigateur.
min-aspect-ratio Rapport largeur/hauteur minimal de la zone d'affichage.
min-color Nombre de bits minimum pour chaque composant de couleur de l'appareil de sortie.
min-color-index Nombre minimum de couleurs que l'appareil peut afficher.
min-height Hauteur minimale de la zone d'affichage, par exemple la fenêtre du navigateur.
min-monochrome Nombre de bits minimum pour chaque 'couleur' sur les appareils monochromes (gris).
min-resolution Résolution minimale de l'appareil, utilisant dpi ou dpcm.
min-width Largeur minimale de la zone d'affichage, par exemple la fenêtre du navigateur.
monochrome Nombre de bits pour chaque 'couleur' sur les appareils monochromes (gris).
orientation Direction de la vue (mode horizontal ou vertical).
overflow-block Comment l'appareil de sortie traite-t-il le contenu en excès le long de l'axe block (Ajouté dans Media Queries Level 4) ?
overflow-inline Est-il possible de faire défiler le contenu en excès le long de l'axe inline (Ajouté dans Media Queries Level 4) ?
pointer L'interface d'entrée principale est-elle un appareil de pointage ? Si c'est le cas, quelle est son précision ?
(Ajouté dans Media Queries Level 4).
resolution Résolution de l'appareil de sortie, utilisant dpi ou dpcm.
scan Processus de numérisation de l'appareil de sortie.
scripting Est-il possible d'utiliser des scripts (par exemple JavaScript) ? (ajouté dans Media Queries Level 4).
mise à jour Combien de temps l'appareil peut modifier l'apparence du contenu (ajouté dans Media Queries Level 4).
width Largeur de la viewport.