Im heutigen Quick Tipp erfahren Sie, wie Sie responsive Layouts mit CSS-Floats erstellen, einer alten, aber vertrauenswürdigen Layoutmethode. Wenn dies erledigt ist, werden wir sehen, wie Bootstrap die Dinge erledigt. Floats sollten ursprünglich nicht als Basis für die Seitenstruktur dienen (neuere CSS-Standards wie Flexbox und Grid zielen darauf ab, dies zu tun), sodass das Arbeiten mit Floats manchmal schwierig sein kann. Schauen wir uns ein Beispiel an, um das zu veranschaulichen.
Erstellen eines Responsive Layouts
Nehmen wir an, dass wir dieses Kartenlayout erstellen wollen:
Sehen Sie sich die Vollversion für eine klarere Idee an.
Grundlegende Stile
Für diese Karten möchten wir keine feste Höhe für die Bildunterschriften festlegen. Wir möchten auch nicht, dass sie eine feste Breite haben. Um die Karten verwendbar zu halten, damit sie nicht zu stark zusammengedrückt werden, müssen wir abhängig von der Größe des Darstellungsbereichs eine unterschiedliche Anzahl von Spalten anzeigen.
Wir haben einige Medienabfragen eingerichtet, sodass Folgendes zutrifft:
Sichtfenster
Anzahl der Spalten
<400px
1
≥400px
2
≥768px
3
≥1024px
4
Hier ist das Markup; Auflisten von Elementen mit Bildern und Bildunterschriften in Figurenelementen:
Sie werden die Medienabfragen unten sehen, die bestimmen, wie breit die Karten in bestimmten Ansichtsfenstern sind. Folgendes gibt es uns:
Das Problem bei diesem fließenden Layout ist jedoch, dass einige Karten stecken bleiben, wenn sie nicht jede neue Reihe löschen, wenn sie versuchen, ihren Weg nach links zu finden.
Zu löschende Karten identifizieren
Gemäß dem obigen Beispiel müssen Sie, wenn die Reihe vier Karten enthält, die fünfte, dann die neunte usw. löschen. Um dies zu erreichen, verwenden wir die : nth-of-type (an + b) CSS-Pseudoklasse, wo die an + b Parameter steht für das gewünschte Wiederholungsmuster. Auf großen Bildschirmen (z. B. ≥ 1024px) verwenden wir beispielsweise 4n + 1. Diese Formel findet jedes Element, das ein Faktor von vier ist, und wählt dann das Element aus Nächster ein.
So können wir unsere Medienanfragen ändern, um zu ändern, welche Karten gelöscht werden:
Sichtfenster
Anzahl der Spalten
Muster wiederholen
<400px
1
-
≥400px
2
2n + 1
≥768px
3
3n + 1
≥1024px
4
4n + 1
Und hier ist das CSS, das das schafft. Beachten Sie, dass unsere Medienabfragen kumulativ sind. Daher müssen wir die vorherige Clearing-Karte jedes Mal neu festlegen, wenn wir eine neue definieren:
@media screen und (min-width: 400px) li width: 50%; li: nth-of-type (2n + 1) clear: left; @media screen und (min-width: 768px) li width: 33.333%; li: nth-of-type (2n + 1) clear: none; li: nth-of-type (3n + 1) clear: left; @media screen und (min-width: 1024px) li width: 25%; li: nth-of-type (3n + 1) clear: none; li: nth-of-type (4n + 1) clear: left;
Zu guter Letzt sollten folgende Dinge erwähnt werden:
Anstatt der klar: links Eigenschaftswert hätten wir auch generischere verwenden können Lösche beide Eigentumswert.
Anstatt der : nth-of-type (an + b) CSS-Pseudoklasse hätten wir auch gleich verwenden können : n-te Kind (an + b) Pseudoklasse.
Nachdem wir nun eine Methode zum Löschen der Schwebekörper besprochen haben, werfen wir einen Blick auf Bootstraps Ansatz, um unser Wissen zu erweitern.
Verwenden der Bootstrap-Methode
Durch die Nutzung des Rastersystems von Bootstrap können wir ein responsives Layout erstellen, das dem vorherigen ähnlich ist. Abhängig von der Größe des Darstellungsbereichs ändert sich auch unser Layout:
Sichtfenster
Anzahl der Spalten
<768px
2
≥768px
3
≥992px
3
≥1200px
4
Hier ist der erforderliche HTML-Code, der besagt, dass unsere Listenelemente sechs der zwölf Spalten in extra kleinen Ansichtsfenstern füllen, vier Spalten in kleinen, dann drei Spalten in großen Ansichtsfenstern:
Eine Beschreibung hier
Normalerweise genügt dieses Markup, wenn alle Spalten gleich hoch sind. In unserem Beispiel haben die Säulen jedoch unterschiedliche Höhen, daher müssen die Schwimmkörper gelöscht werden. Dazu verwenden wir die Clearfix Klasse sowie die responsive Utility-Klassen.
Erstens auf extra kleinen Bildschirmen (<768px), we have a two column layout, therefore we should clear the floats after every second list item. Add the following markup after every second list item:
Als nächstes auf kleinen und mittleren Bildschirmen (≥768px und <1200px), we have a three column layout, so we need to clear the floats after every third list item. To do this, we add some extra markup after every third list item (not necessary for the last one):
Auf großen Bildschirmen (≥1200px) haben wir schließlich ein vierspaltiges Layout, daher sollten wir die Floats nach jedem vierten Listenelement löschen. Fügen Sie wieder etwas Markup hinzu, diesmal nach jedem vierten Listeneintrag:
Diese zusätzlichen Blöcke sind etwas chaotisch (viele Leute mögen das Markup für Fahrstile nicht), erzielen aber das gleiche Ergebnis wie unsere ursprüngliche Methode. Jedes Listenelement ist ausgeblendet, außer bei bestimmten Haltepunkten, wenn diese angenommen werden Bildschirmsperre; effektiv als unsichtbare horizontale Trennlinien zwischen unseren Reihen.
Hier ist die zugehörige Demo:
Fazit
In diesem kurzen Artikel haben wir zwei einfache Techniken zum Erstellen von responsiven Layouts mit Floats beschrieben. Obwohl Floats für Ihre modernen Layouts möglicherweise nicht die erste Wahl sind (und auch nicht sein sollten), hoffe ich, dass Sie diese Techniken irgendwann für nützlich halten werden. Wenn Sie eine andere Technik verwenden, teilen Sie diese unbedingt mit uns!
Share
Accentsconagua
