Comment utiliser Media Queries en JavaScript avec matchMedia –

Cet article de 2011 a été mis à jour en 2018.

Quand il a été introduit, responsive design était l'un des concepts de mise en page les plus excitants depuis que CSS a remplacé les tables. La technologie sous-jacente utilise requêtes média pour déterminer le type, la largeur, la hauteur, l'orientation, la résolution, le format et la profondeur de couleur des différents styleshets.

Si vous pensiez que responsive design était réservé aux CSS seulement dans les mises en page, vous serez heureux d'entendre les requêtes de média en JavaScript, comme l'explique cet article

Media Queries in CSS

Regarder un site existant en utilisant des pratiques de design Web modernes et réactives

] S'attaquer aux problèmes courants associés à Responsive Design: navigation, formulaires, tableaux, vidéos et images

Dans l'exemple suivant, cssbasic.css est servi à tous les appareils. Mais, si c'est un écran avec une largeur horizontale de 500 pixels ou plus, csswide.css est également envoyé:

Les possibilités sont infinies et la technique a longtemps été exploitée par la plupart des sites web sur Internet. Redimensionner la largeur de votre navigateur déclenche des changements dans la mise en page de la page Web.

Avec requêtes de médias de nos jours, il est facile d'adapter la conception ou redimensionner des éléments en CSS. Mais que faire si vous avez besoin de changer le contenu ou la fonctionnalité? Par exemple, sur les petits écrans, vous pouvez utiliser un titre plus court, moins de bibliothèques JavaScript ou modifier les actions d'un widget.

Il est possible d'analyser la taille de la fenêtre en JavaScript mais c'est un peu compliqué:

• support window.innerWidth et window.innerHeight . (IE avant la version 10 en mode quirks requis document.body.clientWidth et document.body.clientHeight .)
• window.onresize
• Tous les principaux navigateurs supportent ] document.documentElement.clientWidth et document.documentElement.clientHeight mais c'est incohérent. Les dimensions de la fenêtre ou du document seront renvoyées en fonction du navigateur et du mode.

Même si vous réussissez à détecter les changements de dimension du viewport, vous devez calculer vous-même des facteurs tels que l'orientation et les proportions. Rien ne garantit qu'il correspondra aux suppositions de votre navigateur lorsqu'il applique des règles de requête média en CSS

Comment écrire des requêtes média avec du code JavaScript

Heureusement, il est possible de répondre aux changements d'état des requêtes CSS3 dans JavaScript. L'API de clé est window.matchMedia . Une chaîne de requête multimédia identique à celles utilisées dans les requêtes de média CSS est transmise:

 const mq = window.matchMedia ("(min-width: 500px)"); 

Les correspond aux retours de propriété vrai ou faux en fonction du résultat de la requête. Par exemple:

 if (mq.matches) {
  // la largeur de la fenêtre est d'au moins 500px
} autre {
  // la largeur de la fenêtre est inférieure à 500px
} 

Vous pouvez également ajouter un écouteur d'événement qui se déclenche lorsqu'une modification est détectée:

 // gestionnaire d'événements de requête multimédia
if (matchMedia) {
  const mq = window.matchMedia ("(min-width: 500px)");
  mq.addListener (WidthChange);
  WidthChange (mq);
}

// modification de la requête multimédia
function WidthChange (mq) {
  if (mq.matches) {
    // la largeur de la fenêtre est d'au moins 500px
  } autre {
    // la largeur de la fenêtre est inférieure à 500px
  }

} 

Vous devez également appeler le gestionnaire directement après avoir défini l'événement. Cela garantira que votre code peut s'initialiser pendant ou après le chargement de la page. Sans cela, WidthChange () ne serait jamais appelé si l'utilisateur ne changeait pas les dimensions de son navigateur.

Au moment de l'écriture, matchMedia a un excellent support de navigateur donc il n'y a aucune raison que vous ne puissiez pas l'utiliser en production.

Vérifiez comment le texte change dynamiquement dans la démo ci-dessous de plus de 500 pixels à moins de 500 pixels lorsque vous redimensionnez la fenêtre de votre navigateur. Sinon, téléchargez l'exemple de code :

Voir le Pen Requêtes CSS Media avec JavaScript par SitePoint ( @SitePoint ) le CodePen

Craig est un consultant Web indépendant au Royaume-Uni qui a créé sa première page pour IE2.0 en 1995. Depuis, il préconise les normes, l'accessibilité et les meilleures pratiques HTML5. Il a écrit plus de 1000 articles pour SitePoint et vous pouvez le trouver @craigbuckler