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


Commentaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.