可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I use a Modernizr media query in JavaScript to change an element margin and add a class "small". My Modernizr media query doesn't work when I resize my browser, but when I refresh the page then it works. I know I can solve this problem using the jQuery $( window ).resize() function, but I want to solve it using a media query. Can any one tell me how I can solve this problem?

<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>

回答1:

At the moment it runs once only (on page load), so of course it only changes when you refresh the page.

Solution: You need your code to run onload and when the browser/window resizes. :

e.g.

<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

A common alternative I now use is to simply trigger a window resize event at the end of the onload (e.g. after the handler is connected).

<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>

Simple JSFiddle example: http://jsfiddle.net/TrueBlueAussie/zv12z7wy/

回答2:

Great answer above in Option 2

Helped me immensely as I was having the same issue of not seeing my changes reflect on initial page resizes. Causing the initial window.resize saves the day.

Just to make the above solution in Option 2 a little cleaner I created a mediaQ variable which I store inside the if statement. This un clutters the if statement. I also store your #secondary id inside a variable.

$(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();