jQuery: Agregar clase dinámicamente según la resolución de la ventana del navegador

Question

Hola amigos Estoy intentando agregar una clase al cuerpo dinámicamente según la resolución de la ventana del navegador. Aquí está el código que estoy tratando de usar, pero necesito ayuda para ajustarlo ya que no sé nada de jQuery.

Las opciones que quiero lograr son:

Una vez que un visitante llega a mi sitio, el código debe comprobar su tamaño de las ventanas del navegador y agregar la clase de cuerpo de acuerdo con las siguientes reglas

1. Si el tamaño de la ventana es más que 1024px pero menos que 1280px luego agrega la clase .w1280.

2. Si el tamaño de la ventana es más de 1280 pxpero menos de 1440px continuación, agregar la clase .w1440.

3. Si el tamaño de la ventana es más de 1440px pero menos de 1280px continuación, agregar la clase .w1680.

4. Si el tamaño de la ventana es más de 1680px luego agrega la clase .wLarge.

Para lograr esto, intento utilizar la siguiente secuencia de comandos. Mis preguntas son:

1. es éste el código correcto ? Si no, ¿cuál es el código correcto?

2. ¿Es este el mejor el código más corto posible? Si no, ¿cuál será el código correcto?

Amablemente ayuda porque mi conocimiento de jQuery es casi CERO.

function checkWindowSize() { 
    if ($(window).width() > 1024) { 
     $('body').addClass('w1280'); 
     } else { 
     $('body').removeClass('w1280'); 
    } 
    if ($(window).width() > 1280) { 
     $('body').addClass('w1440'); 
     } else { 
     $('body').removeClass('w1440'); 
    } 
    if ($(window).width() > 1440) { 
     $('body').addClass('w1680'); 
     } else { 
     $('body').removeClass('w1680'); 
    } 
    if ($(window).width() > 1600) { 
     $('body').addClass('wLarge'); 
     } else { 
     $('body').removeClass('wLarge'); 
    } 
}  
checkWindowSize() 

Answer 1

Si no está almacenando cualquier otra clase en el elemento body, usted puede hacer esto:

function checkWindowSize() { 
    var width = $(window).width(); 
    document.body.className = width > 1600 ? 'wLarge' : 
           width > 1440 ? 'w1680' : 
           width > 1280 ? 'w1440' : 
           width > 1024 ? 'w1280' : ''; 
} 

Algunas personas podrían aconsejarle que hacerlo con una declaración switch, pero luego, algunos a las personas también les gusta comer a sus crías.

Esta función sobrescribirá la clase body cada vez que se llame (el valor predeterminado, si el navegador es menor que/igual a 1024 píxeles, no es clase), así que como dije no funcionará si su body tiene otras clases que necesitan mantenerse.

EDITAR sugerencias de Per Šime, aquí es una forma más segura de hacerlo:

function checkWindowSize() { 
    var width = $(window).width(), 
    new_class = width > 1600 ? 'wLarge' : 
       width > 1440 ? 'w1680' : 
       width > 1280 ? 'w1440' : 
       width > 1024 ? 'w1280' : ''; 

    $(document.body).removeClass('wLarge w1680 w1440 w1280').addClass(new_class); 
}