La consulta Modernizr Media no funciona cuando se cambia el tamaño del navegador
Utilizo una consulta de medios Modernizr en JavaScript para cambiar el margen de un elemento y agregar una clase "pequeña". Mi consulta de medios Modernizr no funciona cuando cambio el tamaño de mi navegador, pero cuando actualizo la página funciona. Sé que puedo resolver este problema usando jQuery$( window ).resize() función, pero quiero resolverlo usando una consulta de medios. ¿Alguien puede decirme cómo puedo resolver este problema?
<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>