resize浏览器时，Modernizr Media查询不起作用

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

       $(document).ready(function() { if (Modernizr.mq('(max-width: 767px)')) { $("#secondary").addClass("small"); $("#secondary").css("margin", " 25px"); } });   #primary { width: 300px; height: 200px; background-color: black; } #secondary { margin: 0 auto; width: 250px; height: 150px; background-color: white; position: absolute; }    
 
 
 
   

Answer 1

目前它只运行一次（在页面加载时），因此当然只有在刷新页面时它才会改变。

解决方案：您需要运行onload 以及浏览器/窗口resize时运行代码。 ：

例如

选项2

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

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

Answer 2

选项2中的上述答案很棒

非常帮助我，因为我遇到了同样的问题，即没有看到我的更改反映在初始页面resize上。 导致初始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();