Så här bygger du ett ansvarsfullt miniatyrbild Galleri

Nyligen ställde jag ut för att bygga ett lyhört miniatyrgalleri. Jag förväntade mig att det skulle ta mig några minuter, men i verkligheten tog det mig några timmar att arbeta igenom. Vi går igenom en liknande process idag för att hjälpa dig att komma ihåg vad det fungerar.

En viktig komponent i att mastera responsiv design är att räkna ut hur man närmar sig specifika uppgifter och anpassar sig till problem som de uppstår inom ramen för större projekt. En dag jobbar du med ett projekt och behöver ett responsivt galleri och du kommer ihåg det här inlägget på det här ämnet.

Sneak Peek

Innan vi börjar, ta en snabb titt på vad vi bygger. Var noga med att ändra storlek på din webbläsarfönstersida för att få en glimt av hur väl sidan svarar på olika visningsstorlekar.

demo: Klicka här för att starta demo.

Initial HTML

Låt oss hoppa in i det här projektet med lite grundläggande HTML. I stället för att använda vanliga gamla bilder i vårt galleri, går vi efter något som är mycket mångsidigare. För en given post kanske du vill ha en bild, en titel och en kort beskrivning. Wrap allt detta till ett repeterbart element och kasta allt i en container div. Det borde se ut så här:

<img src="//lesptitesaffairesdemayl.be/img/images_2/how-to-build-a-responsive-thumbnail-gallery_12.jpg"> <h2>Flödar kolumnerna</h2> <p>Det här är den svåraste delen. Vi måste ta reda på vår bredd och marginal för varje element i galleriet. Liksom med behållaren som helhet behöver var och en av dessa använda en procentandel så att de anpassar sig till förändringar i visningsstorleken.</p> <p>Som utgångspunkt skulle jag vilja använda en fem kolonndesign. För att räkna ut den matte som behövs för att dra av det är det lättast att börja med marginalerna. Jag vill ha en fyra procent marginal mellan varje kolumn, så multiplicera den med fem kolumner och vi vet att tjugo procent av vår bredd kommer att upptas av marginaler, vilket lämnar åttio procent för innehåll. Åttio procent dividerat med fem är lika med en sexton procent bredd för varje kolonn. </p> <img src="//lesptitesaffairesdemayl.be/img/images_2/how-to-build-a-responsive-thumbnail-gallery_13.jpg"> <p>Nu kan vi lägga till dessa värden i den CSS som vi redan har etablerat. Varje .galleryItem-klass representerar en kolumn, så varje har en bredd på 16% och en marginal på 2% på varje sida för totalt 4% per objekt. </p> <textarea wrap="soft" readonly=""> .galleryItem {color: # 797478; font: 10px / 1.5 Verdana, Helvetica, sans-serif; flyta till vänster; bredd: 16%; marginal: 2% 2% 50px 2%; }

Detta ger oss en perfekt fem kolonnlayout som ser bra ut på skärmar som är 13 tum eller större.

Där blir det grymt

Tyvärr börjar denna layout verkligen suga när vi minskar sidstorleken. När vi är under 500px breda har den helt förlorat sin läsbarhet och användbarhet.

För att ta itu med detta problem använder vi mediefrågor för att infoga några brytpunkter som återställer kolumnerna till en lämpligare storlek.

Besluta om brytpunkter

Det har skett mycket diskussion på senare tid om vilka brytpunkter du ska sikta på i din design. Marknaden är mättad med olika enheter i olika storlekar, och det är inte lätt att redogöra för alla dessa specifikt.

För att förenkla denna uppgift, låt oss skrapa våra tankar om vilken storlek skärm de mest populära enheterna har och låt vår design själv bestämma var brytpunkterna är. Om vi ​​analyserar punkterna där vår layout bryter ner, kan vi fixa dessa specifika områden, vilket gör att vår design ser bra ut på alla tänkbara enheter (vårt fluidnät tar hand om det mellanliggande).

Var bryter det?

Det bästa sättet att testa detta är bara att öppna vår levande förhandsgranskning i en webbläsare och börja reducera fönsterstorleken. Tekniskt sett kommer vår layout aldrig att bryta eftersom den är byggd för att skala. Men vid omkring 940px börjar textpelets kolumner bli alltför trånga efter min smak:

För att ta hänsyn till detta måste jag ta kolumnen ner till fyra istället för fem vid den tiden. Genom att minska vår kolonnbredd till 21% kan vi göra så mycket. Eftersom jag använder både maxbredd? och? max-enhet-bredd? här kommer designen att återflöde på båda skrivbordsfönstervinduerna (vid denna storlek och lägre) samt alla enheter med fysiska skärmstorlekar under denna bredd.

@media bara skärm och (max bredd: 940px), endast skärm och (max enhetens bredd: 940px) {.galleryItem {width: 21%;}}

Lägga till i dessa stilar korrigerar detta problem snyggt. Vår fem kolonndesign fungerar nu perfekt från full storlek till 940px, vilket innebär att det blir en fyra kolonndesign.

Skölj, skölj och repetera

Vid denna tidpunkt upprepar du bara samma process om och om igen. Fortsätt minska fönstret och titta på en punkt där designen inte längre fungerar bra. Jag hittar snabbt ett annat problematiskt område runt 720px:

Den här gången vill vi ta med designen till en två kolonndesign, som görs med en kolumnbredd på cirka 29,33%.

@media endast skärm och (max bredd: 720px), endast skärm och (max enhetbredd: 720px) {.galleryItem {width: 29.33333%;}}

Jag fortsatte denna process hela vägen ner till den punkt där jag bara hade en kolumn precis runt iPhoneens storlek. Här är den fullständiga uppsättningen mediafrågor.

/ * MEDIA QUERIES * / @media bara skärm och (max bredd: 940px), endast skärm och (max enhetbredd: 940px) {.galleryItem {width: 21%;}} @media only screen and bredd: 720px), endast skärm och (max bredd: 720px) {.galleryItem {width: 29.33333%;}} @media only screen och (max bredd: 530px), endast skärm och : 530px) {.galleryItem {width: 46%;}} @media only screen och (maxbredd: 320px), endast skärm och (max enhetbredd: 320px) {.galleryItem {width: 96%;}. galleryItem img {width: 96%;} .galleryItem h3 {font-size: 18px;} .galleryItem p {font-size: 18px;}}

Slutsats

Där har vi det.Du borde nu ha ett snyggt formaterat lyhörd miniatyrgalleri som ser bra ut på nästan alla enheter och webbläsarfönster.

I stället för att tänka på vilka mediasökningar som är mest populära analyserade vi istället de punkter där vår specifika design upphörde att fungera och reducerade antalet kolumner vid den tiden för att göra en bättre läsupplevelse. Resultatet är en design som utmärker sig i det mellanliggande.