Astuce: une feuille de style différente selon la taille de la fenêtre

Aujourd’hui en bossant sur le nouveau design j’ai voulu adapter mon design selon la taille de la fenêtre du navigateur, je vais donc partager cette petite astuce avec vous. Ici je vais utiliser un petit bout de Javascript, et plus précisement du jQuery.

Attention ça va aller vite!

$(window).resize(function(){

      //on récupère la taille de la fenêtre
      var w = $(window).width();
      //on stock la valeur de l'attribut href de notre css actuelle
      var default_css = $("link[rel='stylsheet']").attr("href");

      //adresse de la nouvelle css
      var new_css =   "http://monsite.com/chemin/vers/la_nouvelle.css";

      //on test si la fenêtre à une largeur inférieur à 1024px
      if(w < 1024){
           $("link[rel='stylesheet"=']").attr({href: new_css});
      } else {
           $("link[rel='stylesheet']").attr({href: default_css});
      }

});

Et voilà, votre feuille de style changera dès que la fenêtre sera redimensionnée