So erstellen Sie eine Responsive Thumbnail-Galerie

Vor kurzem habe ich mich dazu entschlossen, eine responsive Thumbnail-Galerie zu erstellen. Ich hatte erwartet, dass es ein paar Minuten dauern würde, aber in Wirklichkeit brauchte ich einige Stunden, um durchzuarbeiten. Wir werden heute einen ähnlichen Prozess durchlaufen, um Ihnen zu helfen, Ihre Gedanken darüber zu erfahren, wie es funktioniert.

Ein Hauptbestandteil des beherrschenden Responsive Designs besteht darin, herauszufinden, wie Sie bestimmte Aufgaben angehen und sich an Probleme anpassen, die sich im Zusammenhang mit größeren Projekten ergeben. Eines Tages arbeiten Sie an einem Projekt und benötigen eine responsive Galerie, an die Sie sich zu diesem Thema erinnern werden.

Vorgeschmack

Bevor wir anfangen, werfen Sie einen kurzen Blick auf das, was wir bauen. Stellen Sie sicher, dass Sie die Größe Ihrer Browser-Fensterseite ändern, um zu sehen, wie gut die Seite auf verschiedene Ansichtsfenstergrößen reagiert.

Demo: Klicken Sie hier, um die Demo zu starten.

Anfangs-HTML

Lassen Sie uns mit etwas grundlegendem HTML in dieses Projekt einsteigen. Anstelle von einfachen alten Bildern in unserer Galerie verwenden wir etwas, das viel vielseitiger ist. Für einen bestimmten Eintrag möchten Sie möglicherweise ein Bild, einen Titel und eine kurze Beschreibung. Wickeln Sie all dies in ein wiederholbares Element und werfen Sie es in einen div-Container. Es sollte ungefähr so ​​aussehen:

<img src="//lesptitesaffairesdemayl.be/img/images_2/how-to-build-a-responsive-thumbnail-gallery_12.jpg"> <h2>Die Spalten fließen</h2> <p>Dies ist der schwierigste Teil. Wir müssen die Breite und den Rand für jedes der Elemente in der Galerie ermitteln. Wie beim gesamten Container muss für jeden dieser Container ein Prozentsatz verwendet werden, damit er sich an Änderungen der Größe des Ansichtsfensters anpassen kann.</p> <p>Als Ausgangspunkt möchte ich ein Design mit fünf Spalten verwenden. Um herauszufinden, welche Berechnungen erforderlich sind, ist es am einfachsten, mit den Rändern zu beginnen. Ich möchte eine Marge von vier Prozent zwischen jeder Spalte, also multiplizieren Sie diese Zahl mit fünf, und wir wissen, dass zwanzig Prozent unserer Breite von Rändern aufgefressen werden, was achtzig Prozent für den Inhalt übrig lässt. Achtzig Prozent, geteilt durch fünf, entspricht einer Breite von sechzehn Prozent für jede Spalte. </p> <img src="//lesptitesaffairesdemayl.be/img/images_2/how-to-build-a-responsive-thumbnail-gallery_13.jpg"> <p>Jetzt können wir diese Werte zu dem CSS hinzufügen, das wir bereits eingerichtet haben. Jede .galleryItem-Klasse stellt eine Spalte dar, so dass jede Seite eine Breite von 16% und eine Marge von 2% auf jeder Seite hat, sodass insgesamt 4% pro Element erzielt werden. </p> <textarea wrap="soft" readonly=""> .galleryItem {color: # 797478; Schrift: 10px / 1,5 Verdana, Helvetica, serifenlos; Schwimmer: links; Breite: 16%; Marge: 2% 2% 50px 2%; }

Dies gibt uns ein perfektes Fünf-Säulen-Layout, das auf Bildschirmen mit einer Größe von 13 Zoll oder mehr gut aussieht.

Wo es hässlich wird

Leider fängt dieses Layout wirklich an, wenn wir die Seitengröße reduzieren. Als wir weniger als 500 Pixel breit sind, hat es seine Lesbarkeit und Nützlichkeit völlig verloren.

Um dieses Problem zu beheben, verwenden wir Medienabfragen, um einige Haltepunkte einzufügen, die die Spalten auf eine geeignetere Größe bringen.

Entscheidung über Haltepunkte

In letzter Zeit wurde viel darüber diskutiert, welche Haltepunkte Sie in Ihrem Design anstreben sollten. Der Markt ist voll mit verschiedenen Geräten, die alle unterschiedliche Größen haben, und es ist nicht einfach, all diese Faktoren speziell zu berücksichtigen.

Um diese Aufgabe zu vereinfachen, lassen Sie uns überlegen, welche Bildschirmgröße die gängigsten Geräte haben, und lassen Sie unser Design selbst entscheiden, wo die Haltepunkte liegen. Wenn wir die Punkte analysieren, an denen unser Layout zusammenbricht, können wir diese spezifischen Bereiche fixieren, wodurch unser Design für jedes denkbare Gerät gut aussieht (unser Fluidgitter sorgt für den Zwischenraum).

Wo bricht es?

Am besten testen Sie dies, indem Sie einfach unsere Live-Vorschau in einem Browser öffnen und die Fenstergröße reduzieren. Technisch gesehen wird unser Layout niemals kaputt gehen, weil es maßstabsgerecht ist. Bei 940 Pixeln werden die Textspalten jedoch für meinen Geschmack viel zu eng:

Um dies zu berücksichtigen, muss ich die Anzahl der Spalten zu diesem Zeitpunkt auf vier anstatt auf fünf reduzieren. Indem wir unsere Säulenbreite auf 21% reduzieren, können wir genau das tun. Da benutze ich beide? Max-width? und? max-gerätebreite? Hier wird das Design sowohl auf Desktop-Browser-Fenstern (bei dieser Größe und darunter) als auch auf Geräten mit physischen Bildschirmgrößen unter dieser Breite neu angezeigt.

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

Das Hinzufügen dieser Stile behebt dieses Problem gut. Unser Fünf-Säulen-Design funktioniert jetzt perfekt von der vollen Größe bis zu 940 Pixeln und wird dann zu einem Vier-Säulen-Design.

Schäumen, spülen und wiederholen

An diesem Punkt wiederholen Sie einfach denselben Vorgang immer wieder. Reduzieren Sie die Fenstergröße weiter und achten Sie auf einen Punkt, an dem das Design nicht mehr gut funktioniert. Ich finde schnell einen anderen problematischen Bereich um 720px:

Diesmal möchten wir das Design auf ein zweispaltiges Design reduzieren, das mit einer Spaltenbreite von etwa 29,33% durchgeführt wird.

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

Ich habe diesen Vorgang bis zu dem Punkt fortgesetzt, an dem ich nur eine Säule in der Größe des iPhones hatte. Hier ist der vollständige Satz von Medienabfragen.

/ * MEDIA QUERIES * / @media only screen und (max-width: 940px), only screen und (max-device-width: 940px) {.galleryItem {width: 21%;}} @media only screen und (max- width: 720px), nur screen und (max-device-width: 720px) {.galleryItem {width: 29.33333%;}} @media only screen und (max-width: 530px), nur screen und (max-device-width) : 530px) {.galleryItem {width: 46%;}} @media only screen und (max-width: 320px), nur screen und (max-device-width: 320px) {.galleryItem {width: 96%;}. galleryItem img {width: 96%;} .galleryItem h3 {Schriftgröße: 18px;} .galleryItem p, {Schriftgröße: 18px;}}

Fazit

Da haben wir esSie sollten jetzt eine gut formatierte, responsive Miniaturansichtsgalerie haben, die auf fast jedem Gerät und jeder Browserfenstergröße gut aussieht.

Anstatt darüber nachzudenken, welche Medienabfragen die beliebtesten sind, haben wir stattdessen die Punkte analysiert, an denen unser spezifisches Design nicht mehr funktionsfähig war, und die Anzahl der Spalten zu diesem Zeitpunkt reduziert, um das Leseerlebnis zu verbessern. Das Ergebnis ist ein Design, das sich dazwischen sehr gut macht.