Comment utiliser les media queries en JavaScript ?

Feb 11 2023

Il peut être assez courant de surveiller les redimensionnements en javascript (pour accomplir certaines fonctionnalités). Il est courant de gérer cette situation en ajoutant un écouteur d'événement sur "redimensionner", ce qui n'est pas la meilleure solution à ce problème, du moins dans la plupart des cas.

Dans cet article, je vais démontrer un moyen efficace de gérer ces situations en JavaScript. Je vais comparer deux approches qui accomplissent la même chose : la méthode matchMedia et l'écouteur d'événement « resize ».

Je vais montrer les inconvénients et les avantages de chaque méthode, montrer comment l'utiliser et donner des exemples en cours de route.

"La méthode Windowde l'interface matchMedia()renvoie un nouvel MediaQueryListobjet qui peut ensuite être utilisé pour déterminer si le documentcorrespond à la chaîne de requête multimédia, ainsi que pour surveiller le document pour détecter quand il correspond (ou cesse de correspondre) à cette requête multimédia."

Tout d'abord, nous devons comprendre que la méthode matchMedia est similaire aux requêtes média CSS, qui est l'ingrédient de base de toute conception réactive.

@media (min-width: 768px) {
  body {
    background-color: coral;
  }
}

La méthode matchMedia() renvoie une MediaQueryList avec les résultats de la requête.

la mediaQueryList est un objet avec 3 propriétés :

correspond : (vrai/faux) si l'écran remplit ou non les conditions de la requête média
media : (chaîne) la requête multimédia elle-même, essentiellement la chaîne que vous avez insérée
onchange : (fonction) méthode d'écoute qui accepte une fonction de rappel invoquée lorsque l'état du média change.

L'utilisation est presque identique aux requêtes média CSS. Nous transmettons la chaîne de requête multimédia à matchMedia(), puis vérifions la propriété "matches".

window.matchMedia("min-width: 768px").onchange = (e) => {
  if (e.matches) {
    // the screen was below 768 and now it's above or equal
    document.body.style.backgroundColor = "coral";
  }
}

La manière typique et la plus courante utilisée par de nombreux développeurs pour gérer le redimensionnement de l'écran en JavaScript consiste à lier un écouteur d'événement de redimensionnement qui vérifie la largeur du document.

window.addEventListener("resize", function() {
  if (document.body.clientWidth >= 768) {
    document.body.style.backgroundColor = "coral";
  }
});

Vous pouvez également voir la différence sur le console.log, l'événement de redimensionnement se déclenchera à chaque fois que le navigateur est redimensionné tandis que le matchMedia ne s'exécutera qu'une seule fois après avoir correspondu à la requête multimédia.

« Même si nous regardons au-delà des problèmes de performances, le redimensionnement est restrictif dans le sens où il ne nous permet pas d'écrire des requêtes média avancées pour des choses comme l'impression et l'orientation. Ainsi, bien qu'il imite le comportement de "requête multimédia" en nous permettant de faire correspondre les largeurs de la fenêtre d'affichage, il est incapable de correspondre à grand-chose d'autre - et nous savons que les véritables requêtes multimédias sont capables de bien plus.

En conclusion, nous avons parlé des besoins de matchMedia et exploré comment il nous permet de définir les conditions des médias et d'examiner l'objet mediaQueryList qui nous permet d'exécuter notre code une fois lorsqu'il correspond à la condition et de manière persistante en définissant la méthode "onchange". de la mediaQueryList.

Nous avons comparé la méthode matchMedia à la liaison d'un écouteur d'événement de redimensionnement, ce qui nous a permis d'examiner la manière la plus appropriée de répondre aux changements de taille de l'écran.

J'ai donné des exemples en cours de route qui font tous la même chose (définir la couleur de fond du corps sur corail) pour afficher comment l'écrire à chaque approche.

Si vous avez des questions concernant ce message ou des suggestions, des corrections ou des notes, n'hésitez pas à commenter, envoyer un e-mail ou DM moi. Merci pour la lecture!