Tengo tres consultas CSS @media y necesito ejecutar JavaScript para medir la altura de un div y mover un segundo div en algunos tamaños de pantalla. El problema es que todas mis consultas se aplican, obviamente porque todas son verdaderas. ¿Cómo puedo ajustar esto para que solo uno de los condicionales se active en jQuery, de manera similar a CSS?
//Responsive Adjustments jQuery(document).ready(function($) { $(window).resize(function () { console.log($(window).width()); if ($(window).width() <= 1024) { console.log ('tab land'); } if ($(window).width() <= 980) { console.log ('tab port'); } if ($(window).width() <= 479) { console.log ('phone port'); } }); });Use else if y verifique desde el móvil hacia arriba:
//Responsive Adjustments jQuery(document).ready(function($) { $(window).resize(function() { console.log($(window).width()); if ($(window).width() <= 479) { console.log('phone port'); } else if ($(window).width() <= 980) { console.log('tab port'); } else if ($(window).width() <= 1024) { console.log('tab land'); } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Puede ajustar sus condiciones:
//Responsive Adjustments jQuery(document).ready(function($) { $(window).resize(function() { console.log($(window).width()); if ($(window).width() <= 1024 && $(window).width() > 980) { console.log('tab land'); } if ($(window).width() <= 980 && $(window).width() > 479) { console.log('tab port'); } if ($(window).width() <= 479) { console.log('phone port'); } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>