Come costruire una galleria di anteprime reattiva

Recentemente ho deciso di costruire una galleria di miniature reattiva. Mi aspettavo che mi ci volessero alcuni minuti, ma in realtà mi ci sono volute alcune ore per lavorare. Oggi seguiremo un processo simile per aiutarti a capire come funziona.

Uno dei principali componenti del controllo del design reattivo è capire come affrontare le attività specifiche e adattarsi ai problemi che si presentano nel contesto di progetti più grandi. Un giorno lavorerai a un progetto e avrai bisogno di una galleria reattiva e ti ricorderai di questo post su quell'argomento.

Sbirciata

Prima di iniziare, dai un'occhiata a ciò che stiamo costruendo. Assicurati di ridimensionare la pagina della finestra del tuo browser per avere un'idea di quanto la pagina risponda alle diverse dimensioni del viewport.

demo: Clicca qui per avviare la demo.

HTML iniziale

Entriamo in questo progetto con un HTML di base. Invece di utilizzare semplici vecchie immagini nella nostra galleria, cercheremo qualcosa di molto più versatile. Per ogni voce data, potresti volere un'immagine, un titolo e una breve descrizione. Avvolgi tutto ciò in un elemento ripetibile e gettalo tutto in un contenitore div. Dovrebbe assomigliare a qualcosa di simile a questo:

<img src="//lesptitesaffairesdemayl.be/img/images_2/how-to-build-a-responsive-thumbnail-gallery_2.jpg"> <h2>Scorrendo le colonne</h2> <p>Questa è la parte più difficile. Dobbiamo calcolare la larghezza e il margine per ciascuno degli elementi nella galleria. Come con il contenitore nel suo insieme, ognuno di questi dovrà utilizzare una percentuale in modo che si adattino alle modifiche nella dimensione del viewport.</p> <p>Come punto di partenza, mi piacerebbe utilizzare un design a cinque colonne. Per capire la matematica necessaria per rimuoverlo, è più facile iniziare con i margini. Voglio un margine del quattro percento tra ogni colonna, quindi moltiplicare quella per cinque colonne e sappiamo che il venti percento della nostra larghezza sarà divorato dai margini, il che lascia l'ottanta percento per il contenuto. L'ottanta percento diviso per cinque equivale a una larghezza di sedici percento per ogni colonna. </p> <img src="//lesptitesaffairesdemayl.be/img/images_2/how-to-build-a-responsive-thumbnail-gallery_3.jpg"> <p>Ora possiamo aggiungere questi valori al CSS che abbiamo già stabilito. Ogni classe .galleryItem rappresenta una colonna, quindi ciascuna avrà una larghezza del 16% e un margine del 2% su ciascun lato per un totale combinato del 4% per articolo. </p> <textarea wrap="soft" readonly=""> .galleryItem {color: # 797478; font: 10px / 1.5 Verdana, Helvetica, sans-serif; fluttuare: a sinistra; larghezza: 16%; margine: 2% 2% 50px 2%; }

Questo ci dà un perfetto layout a cinque colonne che sembra perfetto su schermi di 13 pollici o più grandi.

Dove diventa brutto

Sfortunatamente, questo layout inizia davvero a succhiare mentre riduciamo le dimensioni della pagina. Nel momento in cui siamo sotto 500px di larghezza, ha completamente perso la sua leggibilità e utilità.

Per risolvere questo problema, utilizzeremo le query multimediali per inserire alcuni punti di interruzione che rifletteranno le colonne in una dimensione più appropriata.

Decidere i punti di interruzione

Ultimamente c'è stata una lunga discussione su quali punti di rottura dovresti puntare nel tuo progetto. Il mercato è saturo di diversi dispositivi tutti di dimensioni diverse, e non è facile tener conto di tutti questi in particolare.

Per semplificare questo compito, scegliamo le nostre opinioni su quale schermo di dimensioni hanno i dispositivi più diffusi e lasciamo che sia il nostro design a decidere dove sono i punti di interruzione. Se analizziamo i punti in cui il nostro layout si guasta, possiamo aggiustare quelle aree specifiche, facendo in modo che il nostro design abbia un bell'aspetto su ogni dispositivo immaginabile (la nostra griglia fluida si prende cura del mezzo).

Dove si rompe?

Il modo migliore per testare questo è solo per aprire la nostra anteprima dal vivo in un browser e iniziare a ridurre le dimensioni della finestra. Tecnicamente, il nostro layout non si romperà mai perché è costruito in scala. Tuttavia, a circa 940 px, le colonne di testo iniziano a diventare troppo strette per i miei gusti:

Per tener conto di ciò, ho bisogno di portare il conto alla rovescia a quattro anziché a cinque in quel punto. Riducendo la larghezza della colonna al 21%, possiamo fare proprio questo. Dal momento che sto usando entrambi? Max-larghezza? e? max-device-width? qui, il design si rifletterà su entrambe le finestre del browser desktop (a questa dimensione e in basso) e su tutti i dispositivi con dimensioni di schermo fisiche sotto questa larghezza.

@media solo schermo e (max-larghezza: 940px), solo schermo e (max-device-width: 940px) {.galleryItem {width: 21%;}}

L'aggiunta di questi stili risolve bene questo problema. Il nostro design a cinque colonne ora funziona perfettamente da full size fino a 940px, a quel punto si trasforma in un design a quattro colonne.

Mescolare, Risciacquare e Ripetere

A questo punto, ripeti lo stesso processo ancora e ancora. Continua a ridurre le dimensioni della finestra e a guardare per un punto in cui il design non funziona più bene. Trovo rapidamente un'altra area problematica intorno a 720px:

Questa volta vogliamo portare il design su un design a due colonne, che viene eseguito con una larghezza della colonna di circa il 29,33%.

@media solo schermo e (max-larghezza: 720px), solo schermo e (max-device-width: 720px) {.galleryItem {width: 29.33333%;}}

Ho continuato questo processo fino al punto in cui avevo solo una colonna attorno alle dimensioni dell'iPhone. Ecco il set completo di query multimediali.

/ * RICHIESTE MEDIA * / @media solo schermo e (max-larghezza: 940px), solo schermo e (max-device-width: 940px) {.galleryItem {width: 21%;}} @media solo schermo e (max larghezza: 720px), solo schermo e (max-device-width: 720px) {.galleryItem {width: 29.33333%;}} @media solo schermo e (max-width: 530px), solo schermo e (max-device-width : 530px) {.galleryItem {width: 46%;}} @media only screen e (max-width: 320px), solo screen e (max-device-width: 320px) {.galleryItem {width: 96%;}. galleryItem img {width: 96%;} .galleryItem h3 {font-size: 18px;} .galleryItem p, {font-size: 18px;}}

Conclusione

Ce l'abbiamo.Ora dovresti avere una galleria di miniature reattiva ben formattata che si adatta perfettamente a quasi tutti i dispositivi e le dimensioni della finestra del browser.

Invece di pensare a quali domande sui media sono più popolari, abbiamo invece analizzato i punti in cui il nostro design specifico ha cessato di funzionare e ha ridotto il numero di colonne a quel punto per migliorare l'esperienza di lettura. Il risultato è un design che eccelle nel mezzo.