Window matchMedia()Méthode

Window 对象参考手册Objet Window

Définition et utilisation

matchMedia() renvoie un nouvel objet MediaQueryList représentant le résultat analysé de la chaîne de requête média spécifiée.

The value of the matchMedia() method can be any one of thecaractéristiques des règles CSS @media, telles quemin-height, min-width, orientation, etc.

L'objet MediaQueryList possède les deux propriétés suivantes :

  • media: le contenu de l'instruction de requête.
  • matches: utilisé pour détecter le résultat de la requête. Si le document correspond à la liste de requêtes média, la valeur est true ; sinon, elle est false.

MediaQueryListL'objet peut également écouter des événements. En écoutant, lorsque le résultat de la requête change, la fonction de rappel spécifiée est appelée.

Méthode Description
addListener(functionref) Ajoute une nouvelle fonction d'écoute qui s'exécute lorsque le résultat de la requête média change.
removeListener(functionref) Supprime un écouteur précédemment ajouté de la liste de requêtes média. Si l'écouteur spécifié ne figure pas dans la liste, aucune opération n'est effectuée.

Syntaxe

window.matchMedia(mediaQueryString)

Description du paramètre :

  • mediaQueryString: Obligatoire. Chaîne représentant la requête média pour laquelle un nouvel objet MediaQueryList sera renvoyé.

Valeur de retour

Renvoie un objet MediaQueryList.

Prise en charge des navigateurs

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge la méthode.

Méthode
matchMedia() 9.0 10.0 6.0 5.1 12.1

Exemples

Exemples

Déterminez la taille de la fenêtre d'écran (écran/viewport) :

if (window.matchMedia("(max-width: 700px)").matches) { /*Fenêtre inférieure ou égale à 700 pixels*/ } else { /*Fenêtre supérieure à 700 pixels*/ }

Essayez-le vous-même »

Exemples

Déterminez la taille de la fenêtre d'écran (écran/viewport). Lorsqu'elle est inférieure ou égale à 700 pixels, changez la couleur d'arrière-plan en jaune ; lorsqu'elle est supérieure à 700 pixels, changez la couleur d'arrière-plan en rose :

function myFunction(x) { if (x.matches) { //Requête média document.body.style.backgroundColor = "yellow"; } else { document.body.style.backgroundColor = "pink"; } } var x = window.matchMedia("(max-width: 700px)") myFunction(x) //La fonction d'écoute appelée lors de l'exécution de x.addListener(myFunction) //Ajouter un écouteur lorsque l'état change

Essayez-le vous-même »

Window 对象参考手册Objet Window

Autres extensions