Fenêtre matchMedia()
Exemple 1
L'écran/la fenêtre d'affichage est-il supérieur à 700 pixels de large :
if (window.matchMedia("(max-width: 700px)").matches) {
// Viewport is less or equal to 700 pixels wide
} else {
// Viewport is greater than 700 pixels wide
}
Définition et utilisation
La matchMedia()méthode renvoie une MediaQueryList avec les résultats de la requête.
Voir également:
Requêtes multimédias
Les requêtes multimédias de la matchMedia()méthode peuvent être n'importe laquelle des fonctionnalités multimédias de la
règle CSS @media , comme min-height, min-width, orientation, etc.
Exemples
matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);
Syntaxe
window.matchMedia(mediaQuery)
Paramètres
| Parameter | Description |
| mediaQuery | Required. A string representing a media query. |
Valeur de retour
| Taper | La description |
| Un objet | Un objet MediaQueryList avec les résultats de la requête multimédia. |
Exemples expliqués
Le premier exemple de cette page exécute une requête multimédia et la compare à l' état actuel de la fenêtre.
Pour exécuter une requête multimédia réactive chaque fois que l'état de la fenêtre change, ajoutez un écouteur d'événement à l'objet MediaQueryList (voir "Plus d'exemples" ci-dessous) :
Plus d'exemples
Si la fenêtre est inférieure ou égale à 500 pixels de large, définissez la couleur d'arrière-plan sur jaune, sinon sur rose :
// Create a match function
function myFunction(x) {
if (x.matches) {
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
// // Create a MediaQueryList object
const mmObj = window.matchMedia("(max-width: 700px)")
// Call the match function at run time:
myFunction(mmObj);
// Add the match function as a listener for state changes:
mmObj.addListener(myFunction);
Prise en charge du navigateur
matchMedia() est pris en charge dans tous les navigateurs modernes :
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 11 | Yes | Yes | Yes | Yes |