Comment - Requêtes multimédias avec JavaScript
Exemple
Si la fenêtre est inférieure ou égale à 700 pixels de large, changez la couleur d'arrière-plan en jaune. S'il est supérieur à 700, changez-le en rose
function myFunction(x) {
if (x.matches) { // If media
query matches
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call
listener function at run time
x.addListener(myFunction) // Attach listener
function on state changes
Utilisation des requêtes média avec JavaScript
Les requêtes multimédias ont été introduites dans CSS3 et constituent l'un des ingrédients clés de la conception Web réactive. Les requêtes multimédias sont utilisées pour déterminer la largeur et la hauteur d'une fenêtre d'affichage afin que les pages Web s'affichent correctement sur tous les appareils (ordinateurs de bureau, ordinateurs portables, tablettes, téléphones, etc.).
La méthode window.matchMedia() renvoie un objet MediaQueryList représentant les résultats de la chaîne de requête multimédia CSS spécifiée. La valeur de la méthode matchMedia() peut être n'importe laquelle des fonctionnalités multimédias de la règle CSS @media , comme min-height, min-width, orientation, etc.
En savoir plus sur les requêtes multimédias dans notre didacticiel CSS Media Queries
En savoir plus sur la conception réactive dans notre tutoriel de conception Web réactive
En savoir plus sur la méthode window.matchMedia() dans notre référence JavaScript.