Sie können das nicht direkt mit Javascript <script> tags tun. Medienabfragen werden in verknüpften CSS-Dateien oder Inline-CSS-Stilen verwendet. Ein grundlegendes Beispiel:
Oder direkt in Ihren Stylesheets:
%Vor%Sie können dafür jedoch eine externe Asset Loader- / Medienabfragebibliothek verwenden ( require.js , modernizr.js , enquire.js und andere), In diesem Fall, ich gebe ein Beispiel mit enquire.js , da ich denke, dass es sehr effektiv ist und jQuery nicht benötigt Standardmäßig:
1) Enthalten Sie enquire.js (verfügbar hier ):
%Vor%2) Erstellen Sie eine Ladefunktion - um JS-Dateien zu laden:
%Vor%3) Brennen Sie enquire.js und warten Sie auf Änderungen der Medienabfrage (sowohl beim Laden als auch beim Ändern der Größe):
%Vor%
Verwendung einer einfachen HTML-Seite mit enquire.js, die von einer externen Datei geladen wurde:
%Vor% Zusätzlich zum Laden von JS-Dateien können Sie auch einen CSS-Loader erstellen, der auf die gleiche Weise funktioniert (bedingt), aber das Objekt @media in CSS nicht verwendet. Es lohnt sich, die Verwendungshinweise für enquire.js zu lesen, da es viel mehr kann, als ich dargestellt habe hier.
Vorbehalt: Nichts darüber verwendet jQuery, aber Sie könnten einige der Funktionen nutzen, die es bietet; Laden von Skripten zum Beispiel - oder Ausführen anderer Funktionen, die Sie benötigen.
media ist kein gültiges Attribut für <script> , überprüfen Sie hier .
Sie sollten also Medientypen manuell erkennen, anstatt das Skript dynamisch zu laden.
Es gibt ein Plug-in für CSS-Medienerkennung in JavaScript , das Sie verwenden können.
%Vor%Tags und Links html jquery media-queries external