调整大小浏览器时，Modernizr Media查询不起作用

Question

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

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

Answer 2

选项2中的上述答案很棒

帮助我很大，因为我有同样的问题，没有看到我的更改反映在初始页面调整大小。 导致初始window.resize节省了一天。

为了使选项2中的上述解决方案更加清晰，我创建了一个mediaQ变量，它存储在if语句中。 这个un混乱了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();

调整大小浏览器时，Modernizr Media查询不起作用

问题描述

2 个解决方案

解决方案1
13 已采纳 2014-09-19 14:01:52

选项2

解决方案2
0 2016-01-28 20:55:16

调整大小浏览器时，Modernizr Media查询不起作用

问题描述

2 个解决方案

解决方案1 13 已采纳 2014-09-19 14:01:52

选项2

解决方案2 0 2016-01-28 20:55:16

解决方案1
13 已采纳 2014-09-19 14:01:52

解决方案2
0 2016-01-28 20:55:16