jQuery: ajoute une classe dynamicment en fonction de la résolution de la fenêtre du navigateur

Bonjour les amis, j’essaie d’append une classe au corps de manière dynamic en fonction de la résolution de la fenêtre du navigateur. Voici le code que j’essaie d’utiliser mais que j’ai besoin d’aide pour le régler car je ne connais pas du tout jQuery.

Les options que je veux réaliser sont:

Une fois qu’un visiteur vient sur mon site, ce code doit vérifier la taille de la fenêtre de son navigateur et append une classe au corps selon les règles suivantes

  1. Si la taille de la fenêtre est supérieure à 1024 pixels mais inférieure à 1280 pixels, ajoutez la classe .w1280 .

  2. Si la taille de la fenêtre est supérieure à 1280 pixels mais inférieure à 1440 pixels, ajoutez la classe .w1440 .

  3. Si la taille de la fenêtre est supérieure à 1440 pixels mais inférieure à 1280 pixels, ajoutez la classe .w1680 .

  4. Si la taille de la fenêtre est supérieure à .wLarge ajoutez la classe .wLarge .

Pour ce faire, j’essaie d’utiliser le script suivant. Mes questions sont:

  1. Est-ce le bon code ? Si non, quel est le code correct?

  2. Est-ce le meilleur code le plus court possible ? Si non, quel sera le bon code?

Veuillez m’aider car ma connaissance de jQuery est presque nulle.

 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() 

Si vous ne stockez aucune autre classe sur l’élément body , vous pouvez procéder comme suit:

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

Certaines personnes peuvent vous conseiller de le faire avec une déclaration switch , mais certaines personnes aiment aussi manger leurs petits.

Cette fonction écrasera la classe du body chaque appel (la valeur par défaut, si le navigateur est inférieur à / égal à 1024 pixels, n’est pas une classe du tout), donc, comme je l’ai dit, cela ne fonctionnera pas si votre body a un autre. classes qui doivent être maintenues.

EDIT Selon les suggestions de Šime, voici un moyen plus sûr de le faire:

 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); } 

Cela a fonctionné pour moi grâce au commentaire de Naina ici: https://www.quora.com/How-do-I-add-and-remove-CSS-classes-using-jQuery-based-on-the-screen-size