Modernizr Media запрос не работает при изменении размера браузера
Я использую медиазапрос Modernizr в JavaScript, чтобы изменить поле элемента и добавить класс «small». Мой медиазапрос 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>