Méthode Window matchMedia()

Objet Window JavaScript

matchMedia()La méthode retourne un nouveau MediaQueryList, qui représente le résultat de l'analyse de la chaîne de caractères de média query spécifiée.

La valeur de la méthode matchMedia() peut êtreRègle @media CSSToute fonction média, par exemple min-hauteur, min-largeur, orientation, etc.

Syntaxe :

window.matchMedia(mediaQueryString)

if (window.matchMedia("(min-largeur:　5(00px)).matches) {
　　　/*　La viewport viewport minimale est500 pixels de large　*/
} else {
　　　/*　La largeur de la viewport viewport est inférieure à500 pixels　*/
}

Compatibilité du navigateur

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge pleinement la méthode matchMedia() :

Valeur du paramètre

Détails techniques

Plus d'exemples

Si la largeur de la viewport est inférieure ou égale à600 pixels, la couleur de fond sera corail. Si elle est supérieure à600, il deviendra vert pâle :

var size = window.matchMedia("(max-largeur:　600px)")
myFunc(size)　//　Appeler la fonction d'écouteur au moment de l'exécution
size.addListener(myFunc)　//　Ajoutez une fonction d'écouteur lors de la modification de l'état
function myFunc(size) {
　　if (size.matches) {
　document.body.style.backgroundColor = "coral";
　　} else {
　document.body.style.backgroundColor = "lightgreen";
　　}
}

Références pertinentes

Tutoriel CSS :Requête CSS média

Objet Window JavaScript