Méthode matchMedia() de la fenêtre Window

Définition et utilisation

matchMedia() La méthode retourne un MediaQueryList avec le résultat de la requête.

Veuillez également consulter :

Objet MediaQueryList

Requête média

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

Instance

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

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

Instance

Exemple 1

Est-ce que l'écran/la vue d'écran est plus large que 700 pixels ?

if (window.matchMedia("(max-width: 700px)").matches) {
  // Largeur de la vue d'écran inférieure ou égale à 700 pixels
}
  // Largeur de la vue d'écran supérieure à 700 pixels
}

essayez-le vous-même

Explication de l'exemple

Ce exemple exécute une requête média et la compare à l'état actuel de la fenêtre.

Pour exécuter une requête média réactive lors de la modification de l'état de la fenêtre, ajoutez un surveillant d'événements à l'objet MediaQueryList (voir ci-dessous "Plus d'exemples") :

Exemple 2

Si la largeur de la vue d'écran est inférieure ou égale à 500 pixels, configurez la couleur de fond en jaune, sinon en rose :

// Créer la fonction de correspondance
function myFunction(x) {
  if (x.matches) {
    document.body.style.backgroundColor = "yellow";
  }
    document.body.style.backgroundColor = "pink";
  }
}
// // Créer un objet MediaQueryList
const mmObj = window.matchMedia("(max-width: 700px)");
// Appeler la fonction match en temps réel :
myFunction(mmObj);
// Ajouter la fonction match en tant que surveillant des changements d'état :
mmObj.addListener(myFunction);

essayez-le vous-même

grammaire

window.matchMedia("mediaQuery)

paramètres

paramètres Description
mediaQuery Obligatoire. Représente la chaîne de caractères de la requête media query.

Retourne la valeur

Type Description
Objet Objet MediaQueryList avec les résultats de la requête media query.

Support du navigateur

Tous les navigateurs le supportent matchMedia()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support 11 Support Support Support Support