Comment construire une galerie de vignettes réactive

Récemment, j'ai entrepris de créer une galerie de vignettes réactives. Je pensais que cela me prendrait quelques minutes, mais en réalité, il me fallait quelques heures pour travailler. Nous allons suivre un processus similaire aujourd'hui pour vous aider à comprendre comment cela fonctionne.

Un élément essentiel de la maîtrise de la conception réactive consiste à déterminer comment aborder des tâches spécifiques et s’adapter aux problèmes qui se posent dans le cadre de projets plus vastes. Un jour, vous travaillerez sur un projet et vous aurez besoin d’une galerie réactive. Vous vous souviendrez de cet article sur ce sujet précis.

Aperçu

Avant de commencer, jetez un coup d'œil à ce que nous construisons. Assurez-vous de redimensionner la page de la fenêtre de votre navigateur pour avoir un aperçu de la réponse de la page aux différentes tailles de fenêtres.

Démo: Cliquez ici pour lancer la démo.

HTML initial

Passons à ce projet avec du HTML de base. Au lieu d'utiliser d'anciennes images simples dans notre galerie, nous allons opter pour quelque chose de beaucoup plus polyvalent. Pour toute entrée donnée, vous voudrez peut-être une image, un titre et une brève description. Envelopper tout cela dans un élément reproductible et le jeter dans un conteneur div. Ça devrait ressembler a quelque chose comme ca:

<img src="//lesptitesaffairesdemayl.be/img/images_2/how-to-build-a-responsive-thumbnail-gallery_12.jpg"> <h2>Faire couler les colonnes</h2> <p>C'est la partie la plus délicate. Nous devons déterminer notre largeur et notre marge pour chacun des éléments de la galerie. Comme pour le conteneur dans son ensemble, chacun d'entre eux devra utiliser un pourcentage afin de s'adapter aux changements de la taille de la fenêtre d'affichage.</p> <p>Pour commencer, j'aimerais utiliser un modèle à cinq colonnes. Pour comprendre le calcul nécessaire, il est plus facile de commencer par les marges. Je veux une marge de quatre pour cent entre chaque colonne, multipliez-la par cinq et nous savons que vingt pour cent de notre largeur seront consommés par les marges, ce qui laisse quatre-vingts pour cent pour le contenu. Quatre-vingt pour cent divisé par cinq équivaut à une largeur de seize pour cent pour chaque colonne. </p> <img src="//lesptitesaffairesdemayl.be/img/images_2/how-to-build-a-responsive-thumbnail-gallery_13.jpg"> <p>Nous pouvons maintenant ajouter ces valeurs au CSS que nous avons déjà établi. Chaque classe .galleryItem représente une colonne. Chacune d'elles aura une largeur de 16% et une marge de 2% de chaque côté pour un total combiné de 4% par article. </p> <textarea wrap="soft" readonly=""> .galleryItem {color: # 797478; police: 10px / 1,5 Verdana, Helvetica, sans serif; float: gauche; largeur: 16%; marge: 2% 2% 50 x 2%; }

Cela nous donne une disposition parfaite de cinq colonnes qui a fière allure sur des écrans de 13 pouces ou plus.

Où ça devient laide

Malheureusement, cette mise en page commence vraiment à être nulle à mesure que nous réduisons la taille de la page. Au moment où nous avons moins de 500px de large, il a complètement perdu sa lisibilité et son utilité.

Pour résoudre ce problème, nous allons utiliser des requêtes de média pour insérer des points d'arrêt qui rediffuseront les colonnes à une taille plus appropriée.

Décider des points d'arrêt

Il y a eu beaucoup de discussions récemment sur les points de rupture que vous devriez viser dans votre conception. Le marché est saturé avec différents appareils, tous de tailles différentes, et il est difficile de prendre en compte tous ces problèmes en particulier.

Pour simplifier cette tâche, réfléchissons à la taille de l'écran des appareils les plus populaires et laissons notre conception déterminer l'emplacement des points de rupture. Si nous analysons les points où notre structure se détériore, nous pouvons corriger ces zones spécifiques, ce qui rend notre conception esthétique pour chaque appareil imaginable (notre grille de fluide prend en charge l’intermédiaire).

Où ça casse?

Le meilleur moyen de tester cela consiste simplement à ouvrir notre aperçu en direct dans un navigateur et à commencer à réduire la taille de la fenêtre. Techniquement, notre mise en page ne sera jamais cassée car elle est construite à l'échelle. Cependant, vers 940 pixels, les colonnes de texte commencent à devenir trop étroites à mon goût:

Pour rendre compte de cela, je dois ramener le compte à rebours à quatre colonnes au lieu de cinq à ce stade. En réduisant la largeur de notre colonne à 21%, nous pouvons faire la même chose. Depuis que j'utilise les deux? Max-width? et? max-device-width? Ici, la conception sera refondue à la fois sur les fenêtres du navigateur de bureau (de cette taille et inférieure) ainsi que sur tous les périphériques dont la taille de l'écran physique est inférieure à cette largeur.

@media only screen et (max-width: 940px), uniquement screen et (max-device-width: 940px) {.galleryItem {width: 21%;}}

Ajouter ces styles corrige ce problème. Notre conception à cinq colonnes fonctionne maintenant parfaitement, de la taille normale à 940 pixels, puis elle se transforme en une conception à quatre colonnes.

Faire mousser, rincer et répéter

À ce stade, vous répétez simplement le même processus encore et encore. Continuez à réduire la taille de la fenêtre et à rechercher un point où la conception ne fonctionne plus correctement. Je trouve rapidement une autre zone problématique autour de 720px:

Cette fois, nous voulons ramener le design à un design à deux colonnes, ce qui correspond à une largeur de colonne d’environ 29,33%.

@media uniquement screen et (max-width: 720px), uniquement screen et (max-device-width: 720px) {.galleryItem {width: 29.33333%;}}

J'ai poursuivi ce processus jusqu'au point où je n'avais qu'une colonne à peu près de la taille de l'iPhone. Voici l'ensemble des requêtes multimédia.

/ * MEDIA QUERIES * / @ Écran uniquement multimédia et (largeur maximale: 940 pixels), uniquement écran et (largeur maximale de périphérique: 940 pixels) {.galleryItem {width: 21%;}} Écran multimédia uniquement (et width: 720px), uniquement l’écran et (max-device-width: 720px) {.galleryItem {width: 29.33333%;}} @media uniquement l’écran et (max-width: 530px), uniquement l’écran et (max-device-width : 530px) {.galleryItem {width: 46%;}} @media uniquement l’écran et (max-width: 320px), uniquement l’écran et (max-device-width: 320px) {.galleryItem {width: 96%;}. galleryItem img {width: 96%;} .galleryItem h3 {taille de la police: 18px;} .galleryItem p, {taille de la police: 18px;}}

Conclusion

Là nous l'avons.Vous devriez maintenant avoir une galerie de vignettes réactives bien formatée qui a fière allure sur à peu près tous les périphériques et la taille de la fenêtre du navigateur.

Au lieu de penser aux requêtes des médias les plus populaires, nous avons plutôt analysé les points sur lesquels notre conception spécifique avait cessé d'être fonctionnelles et réduit le nombre de colonnes à cet endroit pour améliorer l'expérience de lecture. Le résultat est un design qui excelle dans l'entre-deux.