Modernizr Media query funktioniert nicht, wenn die Größe browser

Benutze ich ein Modernizr media query in JavaScript zu ändern, ein element margin und fügen Sie eine Klasse "kleiner". Meine Modernizr media query funktioniert nicht, wenn ich die Größe in meinem browser, aber wenn ich die Seite aktualisieren, dann funktioniert es. Ich weiß, ich kann lösen dieses problem mit der jQuery $( window ).resize() Funktion, aber ich will es lösen, mit einem media-query. Kann einer mir sagen wie ich dieses problem lösen?

<html class="no-js">
    <head>
        <title>Foundation 5</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="modernizr.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                if (Modernizr.mq('(max-width: 767px)')) {
                    $("#secondary").addClass("small");
                    $("#secondary").css("margin", " 25px");
                }
            });
        </script>
        <style type="text/css">
            #primary {
                width: 300px;
                height: 200px;
                background-color: black;
            }
            #secondary {
                margin: 0 auto;
                width: 250px;
                height: 150px;
                background-color: white;
                position: absolute;
            }

        </style>
    </head>
    <body>
        <div id="primary">
            <div id="secondary">

            </div>
        </div>
    </body>
</html>
InformationsquelleAutor user2365514 | 2014-09-19
  1. 13

    Im moment läuft es nur einmal (beim laden der Seite), so natürlich es ändert sich nur, wenn Sie die Seite aktualisieren.

    Lösung: müssen Sie Ihren code ausführen, onload und, wenn der browser/Fenster ändert. :

    z.B.

    <script type="text/javascript">
    var mod = function(){
        if (Modernizr.mq('(max-width: 767px)')) {
            $("#secondary").addClass("small").css("margin", " 25px");
        } else {
            //Clear the settings etc
            $("#secondary").removeClass("small").css("margin", "");   //<<< whatever the other margin value should be goes here
        }
    }

    //Shortcut for $(document).ready()
    $(function() {
        //Call on every window resize
        $(window).resize(mod);
        //Call once on initial load
        mod();
    });
</script>

    Option 2

    Einer gemeinsamen alternative, die ich jetzt benutze ist einfach löst ein Fenster aus resize Ereignis am Ende der onload (z.B. nach dem hf verbunden ist).

    <script type="text/javascript">

    //Shortcut for $(document).ready()
    $(function() {
        //Call on every window resize
        $(window).resize(function(){
            if (Modernizr.mq('(max-width: 767px)')) {
                $("#secondary").addClass("small").css("margin", " 25px");
            } else {
                //Clear the settings etc
                $("#secondary").removeClass("small").css("margin", "");   //<<< whatever the other margin value should be goes here
            }
        }).resize();   //Cause an initial widow.resize to occur
    });
</script>

    Einfach JSFiddle Beispiel: http://jsfiddle.net/TrueBlueAussie/zv12z7wy/

    • Vielen Dank für die Antwort. Ich habe Ihren code benutzt, aber es funktioniert nicht
    • Ich war noch Tippen 🙂 benutzen Sie bitte die neueste version (es hat jetzt die reset). Wenn es nicht funktioniert immer noch, bitte mehr details als "geht nicht" 🙂
    • Nochmals vielen Dank, es ist mein Fehler, dein code funktioniert Prima. Tolle Arbeit.
    InformationsquelleAutor Gone Coding
  2. 0

    Super Antwort, oben in Option 2

    Half mir ungemein, wie ich hatte das gleiche Problem, nicht zu sehen, meine änderungen auf der ersten Seite ändert. Verursacht die erste window.resize rettet den Tag.

    Nur um die oben genannte Lösung in Option 2 ein wenig cleaner erstellte ich eine mediaQ variable, die ich innerhalb der if-Anweisung. Diese un unübersichtlich die wenn-Anweisung. Ich auch speichern Sie Ihre #secondary - id innerhalb einer Variablen. 

    $(window).resize(function(){
    var mediaQ = Modernizr.mq('only screen and (max-width:767px)');
    var secondaryId = $("#secondary");
    //if mediaQ is true
    if(mediaQ){
        secondaryId.addClass("small"); 
        secondaryId.css("margin", " 25px");
    //if mediaQ is false
    } else {
        secondaryId.removeClass("small");
        secondaryId.css("margin", ""); 
    }
}).resize();
    • Nur Kette die jQuery-Befehle und die temp-variable ist sowieso nicht brauchte (aktualisiert meine Antworten zu tun).
    InformationsquelleAutor brent_white
Schreibe einen Kommentar