Você pode usar o evento resize do jQuery. O código abaixo adiciona as classes quando a página é carregada, e posteriormente, toda vez que a tela for redimensionada (disparando o evento resize
):
function addIconClasses() {
$(".call-principal").each(function(){
var scre = $("body").width();
if ( scre >= 1200 ) {
$(".icon").addClass("icon-lg");
} if ( scre > 992 && scre < 1200 ) {
$(".icon").addClass("icon-md");
} if ( scre > 768 && scre < 992 ) {
$(".icon").addClass("icon-sm");
} if ( scre < 768 ) {
$(".icon").addClass("icon-xs");
}
});
}
$(document).ready(function () {
// Adicionar classes ao carregar o documento
addIconClasses();
$(window).resize(function() {
// Adicionar sempre que a tela for redimensionada
addIconClasses();
});
});
Só um detalhe: não esqueça de também remover as classes que já foram adicionadas sempre que o resize
executar, usando o removeClass
.
Se possível, considere utilizar CSS Media Queries. Acho que elas podem ser muito úteis no seu caso, evitando a necessidade de todo esse javascript que mostrei acima. Por exemplo:
.icon {
/* Estilo padrão do ícone */
}
/* largura máxima de 992px */
@media screen and (max-width: 992px) {
.icon {
/* Estilo modificado do ícone */
}
}
Este código customiza o CSS da classe .icon
quando a tela tiver no máximo 992px. Você pode adicionar mais um @media
para cada largura que quiser customizar.