调整浏览器大小时，Modernizr 媒体查询不起作用答案

【问题标题】：Modernizr Media query doesn’t work when resize browser调整浏览器大小时，Modernizr 媒体查询不起作用
【发布时间】：2014-11-14 03:40:06
【问题描述】：

我在 JavaScript 中使用 Modernizr 媒体查询来更改元素边距并添加一个“小”类。当我调整浏览器大小时，我的 Modernizr 媒体查询不起作用，但是当我刷新页面时它就起作用了。我知道我可以使用 jQuery $( window ).resize() 函数来解决这个问题，但我想使用媒体查询来解决它。谁能告诉我如何解决这个问题？

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

【问题讨论】：

标签： javascript jquery media-queries modernizr

【解决方案1】：

目前它只运行一次（在页面加载时），所以当然它只会在你刷新页面时改变。

解决方案：您需要您的代码在浏览器/窗口调整大小时运行 onload和。：

例如

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

选项 2

我现在使用的一种常见替代方法是在onload 的末尾（例如在连接处理程序之后）简单地触发一个窗口resize 事件。

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

简单的 JSFiddle 示例： http://jsfiddle.net/TrueBlueAussie/zv12z7wy/

【讨论】：

我还在打字 :) 请使用最新版本（现在已重置）。如果它仍然不起作用，请提供比“它不起作用”更多的细节:)
再次感谢您，这是我的错误，您的代码工作正常。伟大的工作。

【解决方案2】：

上面选项2中的好答案

极大地帮助了我，因为我遇到了同样的问题，即没有看到我的更改反映在初始页面调整大小上。使用初始 window.resize 可以节省一天的时间。

为了使 选项 2 中的上述解决方案更简洁，我创建了一个 mediaQ 变量，将其存储在 if 语句中。这使 if 语句变得混乱。我还将您的#secondary id 存储在一个变量中。

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

【讨论】：

只需链接 jQuery 命令，无论如何都不需要临时变量（更新了我的答案）。