javascript 调整浏览器大小时，Modernizr Media 查询不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25935686/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Modernizr Media query doesn’t work when resize browser
提问by user2365514
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?
我在 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>
回答by Gone Coding
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 andwhen the browser/window resizes. :
解决方案：你需要你的代码运行的onload和当浏览器/调整窗口大小。：
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
选项 2
A common alternative I now use is to simply trigger a window resizeevent at the end of the onload(e.g. after the handler is connected).
我现在使用的一个常见替代方法是resize在结束时onload（例如在连接处理程序之后）简单地触发一个窗口事件。
<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/
简单的 JSFiddle 示例：http : //jsfiddle.net/TrueBlueAussie/zv12z7wy/
回答by brent_white
Great answer above in Option 2
上面选项 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.resizesaves the day.
对我有很大帮助，因为我遇到了同样的问题，即没有看到我的更改反映在初始页面调整大小上。导致初始window.resize节省一天。
Just to make the above solution in Option 2a little cleaner I created a mediaQvariable which I store inside the if statement. This un clutters the if statement. I also store your #secondaryid inside a variable.
只是为了使选项 2 中的上述解决方案更简洁一些，我创建了一个mediaQ变量，将其存储在 if 语句中。这会使 if 语句变得混乱。我还将您的#secondaryid存储在一个变量中。
$(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();
