调整大小浏览器时，Modernizr Media查询不起作用
[英]Modernizr Media query doesn’t work when resize browser
问题描述
I use a Modernizr media query in JavaScript to change an element margin and add a class "small". 
我在JavaScript中使用Modernizr媒体查询来更改元素边距并添加“小”类。 My Modernizr media query doesn't work when I resize my browser, but when I refresh the page then it works. 当我调整浏览器大小时，我的Modernizr媒体查询不起作用，但当我刷新页面时，它可以工作。 I know I can solve this problem using the jQuery $( window ).resize() function, but I want to solve it using a media query. 我知道我可以使用jQuery $( window ).resize()函数解决这个问题，但我想用媒体查询来解决它。 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>
2 个解决方案
解决方案1
13 已采纳 2014-09-19 14:01:52
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. 解决方案：您需要运行onload 以及浏览器/窗口调整大小时运行代码。 : ：
eg 例如
<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 resize event at the end of the onload (eg after the handler is connected). 我现在使用的常见替代方法是在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>
Simple JSFiddle example: http://jsfiddle.net/TrueBlueAussie/zv12z7wy/ 简单的JSFiddle示例： http ： //jsfiddle.net/TrueBlueAussie/zv12z7wy/
解决方案2
0 2016-01-28 20:55:16
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.resize saves the day. 导致初始window.resize节省了一天。
Just to make the above solution in Option 2 a little cleaner I created a mediaQ variable which I store inside the if statement. 为了使选项2中的上述解决方案更加清晰，我创建了一个mediaQ变量，它存储在if语句中。 This un clutters the if statement. 这个un混乱了if语句。 I also store your #secondary id inside a variable. 我还将#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();
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.