Comment utiliser JavaScript pour les requêtes média
- Page précédente Élément HTML glissant
- Page suivante Coloration syntaxique
Utilisation de JavaScript pour les requêtes média
Les requêtes média ont été introduites dans CSS3 et sont l'un des éléments clés de la conception Web réactive. Les requêtes média sont utilisées pour déterminer la largeur et la hauteur de la fenêtre de visualisation afin que le site Web s'affiche bien sur tous les appareils (ordinateurs de bureau, ordinateurs portables, tablettes, téléphones mobiles, etc.).
window.matchMedia() La méthode retourne un objet MediaQueryList, qui représente le résultat de la requête CSS média spécifiée.matchMedia() La valeur de la méthode peut être CSS @media n'importe quelle caractéristique média de règle, par exemple min-height、min-width、orientation et al.
Exemple
Si la largeur de la fenêtre de visualisation est inférieure ou égale à 700 pixels, changez la couleur de fond en jaune. Si la largeur est supérieure à 700, changez-la en rose :
function myFunction(x) {
if (x.matches) { // Si la requête média correspond
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
// Créer un objet MediaQueryList
var x = window.matchMedia("(max-width: 700px)")
// Appeler la fonction de surveillance au cours de l'exécution
myFunction(x);
// Ajouter une fonction de surveillance lors du changement d'état
x.addEventListener("change", function() {
myFunction(x);
});
Pages associées
Tutoriel :Requête média CSS
Tutoriel :Conception de site web réactif
Manuel de référence :Méthode JavaScript window.matchMedia()
- Page précédente Élément HTML glissant
- Page suivante Coloration syntaxique
