Функция изменения размера jQuery странное поведение

Question

Я хочу удалить этот класс: «col-sm-8» и добавить это: «col-sm-12» всякий раз, когда размер экрана составляет 500 пикселей или меньше. (просто пытается мобилизовать мобильность).

Я пытаюсь следующую функцию:

$(window).resize(function() { 
    if ($(window).width() <= 550) { 
    /*$(".search-form-responsive").removeClass("col-sm-8"); 
    $(".search-form-responsive").addClass("col-sm-12");*/ 
    alert("sdjkgh"); 
    } 
}); 

Но я только что встретил странную вещь. Всякий раз, когда я изменяю размер и делаю свой размер экрана 500px, он продолжает предупреждать один за другим, и размер экрана автоматически изменяется. и эти две строки с комментариями не работают.

Смотрите эту fiddle

Answer 1

Да, resize будет непрерывно огонь, как изменение размера в настоящее время выполняется.

Используйте css media queries вместо

@media (max-width: 550px) { 
    .search-form-responsive { 
    /*styles here */ 
    } 
}