A consulta do Modernizr Media não funciona quando o navegador é redimensionado
Eu uso uma consulta de mídia Modernizr em JavaScript para alterar uma margem de elemento e adicionar uma classe "pequena". Minha consulta de mídia Modernizr não funciona quando redimensiono meu navegador, mas quando atualizo a página, ela funciona. Eu sei que posso resolver esse problema usando o jQuery$( window ).resize()
, mas quero resolvê-lo usando uma consulta de mídia. Alguém pode me dizer como posso resolver esse 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>