Modernizr mit Respond.js

Ich überprüfe sorgfältig, wie ich sie am besten nutzen kann Modernizr und Antwort.js für Responsive Design und habe ein paar Fragen an die Community.

Erstens sind meines Wissens nach beim Bündeln von Modernizr mit Respond.js keine weiteren Codierungen oder Tests für die Unterstützung von Medienabfragen in IE8 und darunter erforderlich. Mit anderen Worten, wenn Respond.js mit Modernizr gebündelt ist, muss ich lediglich Modernizr in meine Quelle laden, um Respond.js zu aktivieren. Richtig?

Zweitens, glauben Sie, dass dies der effizienteste Weg ist, um Unterstützung für Medienabfragen in IE8 und niedriger zu erreichen? Im Wesentlichen würde ich ein größeres Modernizr-Skript einbinden, als es für Browser erforderlich ist, die bereits Medienabfragen unterstützen. Wäre es nicht effizienter, die beiden Skripts zu trennen und Respond.js nur zu laden, wenn ein Test für Medienabfragen fehlschlägt?

Drittens, wenn ich die beiden Skripte trennen möchte, was ist Ihrer Meinung nach der beste Weg, um Respond.js bei Bedarf zu laden? Eine Option wäre die Verwendung eines IE-spezifischen bedingten Kommentars zum Laden von Respond. Eine weitere Option besteht darin, yepnope und Modernizr zu verwenden, um die Unterstützung für Medienabfragen zu testen und bei Bedarf Respond zu laden. Was effizienter und fehlersicherer wäre.

Wenn ich mich schließlich dafür entscheide, die beiden Skripte zu trennen und Respond bei Bedarf mit Modernizr zu laden, bin ich auf die beiden folgenden Techniken gestoßen:

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

ODER

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

Ich habe festgestellt, dass der zweite IE8 zum Absturz bringt, aber einfach neu geschrieben werden muss. Welche Technik würden Sie empfehlen?

Danke für all die Hilfe.

Erstens sind meines Wissens nach beim Bündeln von Modernizr mit Respond.js keine weiteren Codierungen oder Tests für die Unterstützung von Medienabfragen in IE8 und darunter erforderlich. Mit anderen Worten, wenn Respond.js mit Modernizr gebündelt ist, muss ich lediglich Modernizr in meine Quelle laden, um Respond.js zu aktivieren. Richtig?

Nun, Sie brauchen zumindest einige CSS3-Medienabfragen, um loszulegen. Respond.js ist im Wesentlichen nur eine JavaScript-Implementierung von Medienabfragen für Browser, die diese nicht unterstützen (z. B. IE kleiner als 8). Stellen Sie einfach sicher, dass der Verweis auf Respond.js NACH Ihren CSS3-Medienabfragen kommt (Verknüpfung).

Also, ja, vorausgesetzt, Sie haben Respond.js mit Modernizr aus einem benutzerdefinierten Build oder was auch immer gebündelt und das wird nach Ihrem CSS3 geladen, alles ist gut. Außerdem benötigt Modernizr etwas mehr Konfiguration in Ihrem HTML (Verknüpfung)

Zweitens, glauben Sie, dass dies der effizienteste Weg ist, um Unterstützung für Medienabfragen in IE8 und niedriger zu erreichen? Im Wesentlichen würde ich ein größeres Modernizr-Skript einbinden, als es für Browser erforderlich ist, die bereits Medienabfragen unterstützen. Wäre es nicht effizienter, die beiden Skripts zu trennen und Respond.js nur zu laden, wenn ein Test für Medienabfragen fehlschlägt?

Modernizr bietet keine Unterstützung für Browser ohne Medienabfragen aus der Kiste. Sie müssen es in einem benutzerdefinierten Build hinzufügen. Also, ja, ich denke, es ist klug, immer zu antworten. Verkleinert fügt die Bibliothek nur etwas mehr als 3 KB hinzu, und wenn sie in die Modernizr-Datei aufgenommen wird, wird keine weitere GET-Anforderung hinzugefügt. Ich würde sagen, lass es einfach drin, um auf alles vorbereitet zu sein.

Drittens würde ich mich für die Modernizr-Methode entscheiden. Ich mag es, neue Sachen zu verwenden, all das zusätzliche JavaScript steht im Weg.

Die neue Version von Respond enthält einige Funktionstests, sodass Sie Modernizr oder Yepnope nicht benötigen!

Hier die Überarbeitung:
https://github.com/scottjehl/Respond/commit/4d60f45716b8395e6f24238f9dc5e34c857e87f2

fügte die Polyfill-Datei window.matchMedia extern von der Hauptfunktion respond.js hinzu. Der Quellcode für diese Polyfill ist hier https://github.com/paulirish/matchMedia.jsund das standardmäßige Einschließen erleichtert die Aktualisierung und ermöglicht eine kleinere Dateikomprimierung für diejenigen, die es bereits über Modernizr oder auf andere Weise enthalten (wenn Sie es sind, können Sie es aus Respond.js löschen).

Außerdem sollten Sie beachten, dass die Verwendung von yepnope.js zu einer Verzögerung führen kann, in der Sie die Nicht-Medien-Abfragestile sehen, bevor die Medien-Abfragestile analysiert und angewendet werden. Die Empfehlung ist, dass Sie respond.js in die Kopfzeile einfügen, um dies so weit wie möglich zu vermeiden, obwohl es auch gut ist, Ihre js-Dateien in der Fußzeile zu behalten, also ganz Ihnen überlassen.

Funktionstests könnten in neueren Bibliotheken sein, wie tkane2000 sagt … Ich wollte nur erwähnen, dass Sie dies wahrscheinlich auch über Modernizr tun könnten:

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

Das Originalplakat hat meiner Meinung nach eine ungültige Medienabfrageprüfung “(nur alle)” … Sollte keine Klammer sein, die auf einigen Dingen basiert, die ich gelesen habe. Nachdem ich die Klammern entfernt habe, scheint respond.js ordnungsgemäß enthalten zu sein.