Modernisation avec Respond.js

Question

Je suis attentivement afin de déterminer la meilleure façon d'utiliser Modernizr et Respond.js pour le responsive design, et ont une ou deux questions pour la communauté.

Tout d'abord, c'est ma compréhension que lorsque le regroupement de Modernizr avec Respond.js aucun autre codage ou de tests sont nécessaires pour les requêtes multimédias dans IE8 et ci-dessous. En d'autres termes, lorsque Respond.js est livré avec Modernizr j'ai simplement charger Modernizr dans mon source Respond.js active. - Il Correct?

Deuxièmement, pensez-vous que c'est le moyen le plus efficace pour obtenir de soutien pour les requêtes de média dans IE8 et ci-dessous? En fait, je serait notamment un plus grand Modernizr script qu'il n'est nécessaire pour les navigateurs qui prennent déjà en charge les requêtes de média. Ne serait-il pas plus efficace de séparer les deux scripts et charger uniquement Respond.js si un test pour questions des médias échoue?

Troisièmement, si je voudrais séparer les deux scripts, que pensez-vous est la meilleure façon de charger Respond.js en cas de besoin? Une option serait d'utiliser un IE commentaire conditionnel à la charge de Répondre. Une autre option est d'utiliser yepnope et Modernizr pour tester la requête de support de support de charge et de Réagir si nécessaire. Ce qui serait plus efficace et faute de preuve.

Enfin, si j'ai choisi de séparer les deux scripts et l'utilisation de Modernizr pour charger Répondre, le cas échéant, j'ai rencontré les deux techniques suivantes:

<script>
        yepnope({
    test : Modernizr.mq('(only all)'),
    nope : ['js/libs/respond.min.js']
});
</script>

OU

<script>Modernizr.mq('(min-width:0)') || document.write('<script src="js/libs/respond.min.js"><\/script>')</script>

J'ai trouvé que la deuxième se bloque IE8, mais doit juste besoin de réécriture. La technique qui recommanderiez-vous?

Merci pour toute l'aide.

Answer 1

Tout d'abord, c'est ma compréhension que lorsque le regroupement de Modernizr avec Respond.js aucun autre codage ou de tests sont nécessaires pour les requêtes multimédias dans IE8 et ci-dessous. En d'autres termes, lorsque Respond.js est livré avec Modernizr j'ai simplement charger Modernizr dans mon source Respond.js active. - Il Correct?

Eh bien, vous devez au moins certains CSS3 media queries pour obtenir vous avez commencé. Respond.js est essentiellement juste un JavaScript de mise en œuvre de requêtes de média pour les navigateurs qui ne supportent pas (par exemple, IE moins tthan 8). Assurez-vous que la référence à Respond.js vient APRÈS votre CSS3 media queries (lien).

Donc, oui, en supposant que vous avez Respond.js livré avec Modernizr d'une coutume de construire ou pour une autre, et qui est chargé après votre CSS3, vous avez tout bon. Aussi, Modernizr besoin de plus de configuration dans le de votre code html (lien)

Deuxièmement, pensez-vous que c'est le moyen le plus efficace pour obtenir de soutien pour les requêtes de média dans IE8 et ci-dessous? En fait, je serait notamment un plus grand Modernizr script qu'il n'est nécessaire pour les navigateurs qui prennent déjà en charge les requêtes de média. Ne serait-il pas plus efficace de séparer les deux scripts et charger uniquement Respond.js si un test pour questions des médias échoue?

Modernizr n'a pas de support pour les navigateurs sans les requêtes des médias hors de la boîte. Vous avez besoin de l'ajouter dans une version personnalisée. Donc, oui, je pense qu'il est judicieux de toujours inclure répondre. Compacte, la bibliothèque s'ajoute seulement un peu plus de 3 ko, et de l'avoir inclus dans la Modernizr fichier ne sera pas ajouter une autre requête GET. Je dirais juste le laisser là-bas pour être prêt à tout.

Troisièmement, j'irais avec la modernizr méthode. J'ai comme l'utilisation de nouveaux trucs, tout ce que supplémentaires de javascript est dans la manière.

Answer 2

La nouvelle version de Répondre inclut certaines disposent d'essai de sorte que vous n'avez pas besoin de Modernizr ou Yepnope!

Voici la version: https://github.com/scottjehl/Respond/commit/4d60f45716b8395e6f24238f9dc5e34c857e87f2

inclus la fenêtre.matchMedia polyfill de l'extérieur de la principale respond.js fonction. Le code source de ce polyfill est ici https://github.com/paulirish/matchMedia.jset dont il out-of-the-box va rendre les choses plus facile à tenir à jour, et à permettre aux plus petits de compression de fichiers pour ceux qui ont déjà notamment via Modernizr ou autre (si vous êtes, vous pouvez le supprimer de Respond.js).

Vous devez également noter que l'utilisation de yepnope.js pourrait provoquer un retard dans lesquelles le non-media query styles avant de la requête de média styles sont analysées et appliquées. La recommandation est que vous mettez respond.js dans l'en-tête pour éviter cela autant que possible, bien que, il est également bon de garder vos fichiers js dans le pied de page afin de vous.

Answer 3

Les tests de fonctionnalités pourraient être dans la nouvelle bibliothèque comme le dit tkane2000 ... Je voulais juste mentionner que vous pourriez probablement le faire aussi avec Modernizr:

   <script>
    Modernizr.load({
    test: Modernizr.mq('only all'),
    nope: 'js/respond.min.js'
  });
  </script>
 

Affiche originale a je pense vérification de requête de média non valide '(seulement tous)' ... Ne doit pas être une parenthèse basée sur certaines choses que j'ai lues. Une fois que j'ai supprimé les parens, respond.js semble être inclus de manière appropriée.