10 plugins jQuery pour aider à des dispositions réactives

Cet article explore dix plugins jQuery qui simplifient la conception Web réactive, en se concentrant sur l'optimisation des éléments tels que la navigation, les formulaires, les images et les carrousels au-delà des ajustements de requête multimédia de base.

1. Grille de tête-haut: Une grille de superposition réactive construite avec HTML, CSS et JavaScript, facilitant une adaptation facile aux besoins de conception réactifs.

Demo source

2. fitvids.js: Un plugin jQuery léger pour les intégres vidéo réactives, automatisant la largeur de la largeur de fluide en utilisant la méthode du rapport intrinsèque.

Demo source

3. adaptiveMedia: un compact (sous 3KB), html5 et solution compatible IE6 ne nécessitant qu'un seul fichier CSS pour toutes les tailles d'écran, éliminant le besoin de requêtes multimédia moins ou CSS3.

Demo source

4. rlightbox: Une boîte à médias jQuery UI affichant divers types de contenu (images, vidéos YouTube / Vimeo), avec Panorama et Re-Dimension en direct et la compatibilité de l'hémorceler.

Demo source

5. Élastide: un carrousel jQuery réactif adaptant sa taille et son comportement à toute taille d'écran.

Demo source

6. Galerie d'images réactive avec carrousel miniature: En utilisant l'élastislide, cet exemple démontre une galerie réactive avec un commutateur de vue pour l'affichage de la vignette et la navigation par clavier.

Demo source

7. Grille photo réactive sans couture: maintient les rapports d'aspect de l'image entre différentes tailles d'écran.

Demo source

8. diaporama jQuery réactif: crée un diaporama jQuery fluide qui évolue de manière responsable.

Demo source

9. WMUSLIDER: Un plugin de curseur cru et sous forme de MIT (utilisez avec prudence).

Demo source

10. DoubleTake: Un plugin de preuve de concept à jour dynamiquement les sources d'image basées sur la largeur du navigateur en utilisant des points d'arrêt définis.

Demo source

Cette liste organisée fournit diverses solutions pour réaliser des dispositions réactives, répondre à divers besoins de conception et complexités. N'oubliez pas de toujours tester soigneusement à travers différents navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!