Petit conseil différentes dispositions pour différentes largeurs

Il est de plus en plus courant que les sites Web et les applications proposent différentes dispositions en fonction de la taille de la fenêtre ou de la résolution de l'utilisateur. Cela peut être accompli de différentes manières, allant des solutions CSS aux solutions JavaScript..

Dans cette astuce vidéo, nous verrons combien il est simple de le faire avec une touche de jQuery et avec la méthode resize ().

En utilisant la méthode "resize ()" de jQuery, nous pouvons facilement écouter lorsque l'utilisateur modifie la largeur de la fenêtre de son navigateur.

 fonction checkWindowSize () if ($ (fenêtre) .width ()> 1800) $ ('corps'). addClass ('grand');  else $ ('body'). removeClass ('large');  $ (fenêtre) .resize (checkWindowSize);

Ensuite, nous ciblons ensuite nos propriétés CSS souhaitées en conséquence..

 #container width: 800px; hauteur: 1000px; arrière-plan: # e3e3e3; marge: auto;  / * Changer la taille du conteneur pour les grandes fenêtres. * / .large #container width: 1000px;  #nav width: 100%; hauteur: 100px; bordure-bas: 1px blanc solide; arrière-plan: # 999999;  .large #nav float: left; largeur: 200px; bordure inférieure: aucune; border-right: 1px blanc solide; hauteur: 1000px; 

• Suivez-nous sur Twitter ou abonnez-vous au fil RSS Nettuts + pour obtenir les meilleurs tutoriels de développement Web sur le Web..