Enquire.js, Media Queries en Javascript

Enquire.js est une librairie légère en JavaScript pur pour gérer les Media Queries. Elle fait moins d’1 ko une fois gzipée et minifiée et n’a besoin d’aucun autre framework pour tourner (jquery, mootools, etc).

 

javascript framework media queries enquire js

 

Dans quels cas l’utiliser ?

La librairie est intéressante si vous voulez un site Responsive, que vous souhaitez mettre en place une approche mobile first.

Imaginez que vous ayez un site avec une largeur fixe adapté particulièrement pour les résolutions d’écran assez grandes. Vous avez déjà regardé du côté des Media Queries en CSS3. Ça fonctionne un peu de la même façon. Voici un exemple concret :

 

CSS :

<style>
    @media only screen and (max-width: 767px) {
        // code
    }
</style>

 

Enquire.js :

<script>
    enquire.register("only screen and (max-width: 767px)", function() {
        // code
    });
</script>

 

Enquire.js fonctionne avec 4 méthodes et une variable de configuration :

  • match() : s’exécute quand la media query est satisfaite
  • unmatch() : s’exécute quand la media query passe de l’état ‘match’ à ‘unmatch’ (plus satisfaite)
  • setup() : s’exécute une fois au début. Elle est utilisée pour paramétrer enquire.js
  • destroy() : utilisée pour supprimer la media query
  • deferSetup : false (par défaut) / true. Retarde l’exécution de la méthode setup() tant que la media query n’est pas satisfaite

 

Elles ne sont pas toutes nécessaires. Vous pouvez vous cantonner aux méthodes match() et unmatch();

Voici un cas d’utilisation un peu plus concret :

<!DOCTYPE html>
<html>
<head>
    <title>Demo Enquire.js</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="enquire.min.js"></script>
    <style>
        .lt-320 { background-color:yellow; }
        .lt-640 { background-color:lightblue; }
        .lt-960 { background-color:green; }
    </style>
</head>
<body>
    <script>
        (function($) {
            var $body = $("body");

            function matchQuery(nomClasse) {
                return {
                    match : function() {
                        $body.addClass(nomClasse);
                    },
                    unmatch : function() {
                        $body.removeClass(nomClasse);
                    }
                };
            }

            enquire
                .register("screen and (min-width:320px) and (max-width:640px)", matchQuery("lt-320"))
                .register("screen and (min-width:640px) and (max-width:960px)", matchQuery("lt-640"))
                .register("screen and (min-width:960px)", matchQuery("lt-960"))
                .listen();
        })(jQuery);
    </script>
</body>
</html>

 

 

Nous utilisons le chaînage des méthodes de façon à ne pas trop se répéter dans le code. Pour une question de facilité, j’ai utilisé le framework jQuery et pour une question de performance, j’ai mis le body en cache de façon à pouvoir y accéder plus rapidement.

Attention toutefois car il n’est pas conseillé d’utiliser Enquire.js pour de simple Media Queries en CSS mais plutôt pour des actions plus complexes comme la modification d’un menu standard en menu déroulant pour mobile.

Enquier.js utilise l’API de matchMedia qui n’est pas supportée par tous les navitateurs (cf ce tableau). Il faut aller utiliser cette méthode.

 

matchmedia

 

Vous trouverez toute la doc ici : http://wickynilliams.github.com/enquire.js/#basics

Créer une carte Google Maps personnalisée
La délégation des évènements en Javascript avec Gator

4 Comments on “Enquire.js, Media Queries en Javascript”

  1. Bonjour,
    J’ai deux ou trois sites que je voudrais adapter au format smartphone et tablette, je vais demander à un ami qui s’y connait pas mal en programmation de m’aider en se basant sur vos infos, j’espère qu’on pourra s’en sortir!

  2. bnjr! je peux avoir un cours complet sur les média query?

    donc il existe un code qui permet d’afficher son site sur tout type , d’écran? et comment?

    1. Bonjour,

      Il n’y a pas de code ‘magique’ qui permet d’avoir un site compatible pour tous les supports mais les media queries peuvent vous aider.
      Cependant, il y a du travail avant d’avoir quelque chose de complet et de correct.
      Vous pouvez commencer par lire ces articles si vous voulez en savoir plus :
      – Les bases de Responsive Web Design (http://www.lije-creative.com/bases-apprendre-responsive-web-design/)
      http://www.alsacreations.com/article/lire/930-css3-media-queries.html

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *