Makro-Layouts beschreiben die größere, seitenweite Struktur Ihrer Benutzeroberfläche.
Bevor Sie ein Layout anwenden, sollten Sie dafür sorgen, dass der Ablauf Ihrer Inhalte sinnvoll ist. Diese einspaltige Standardsortierung entspricht den kleineren Bildschirmen.
<body>
<header>…</header>
<main>
<article>…</article>
<aside>…</aside>
</main>
<footer>…</footer>
</body>
Wenn Sie diese einzelnen Komponenten auf Seitenebene anordnen, Sie entwerfen ein Makrolayout: eine ganzheitliche Ansicht Ihrer Seite. Mithilfe von Medienabfragen können Sie in CSS Regeln bereitstellen, die beschreiben, wie diese Ansicht an verschiedene Bildschirmgrößen angepasst werden soll.
Raster
Das CSS-Raster ist ein hervorragendes Tool, um ein Layout auf Ihre Seite anzuwenden. Angenommen, Sie möchten im obigen Beispiel ein zweispaltiges Layout, sobald genügend Bildschirmbreite verfügbar ist. Um dieses zweispaltige Layout anzuwenden, sobald der Browser breit genug ist, Verwenden Sie eine Medienabfrage, um die Rasterstile über einem bestimmten Haltepunkt zu definieren.
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
Flexbox
Für dieses spezielle Layout können Sie auch Flexbox verwenden. Die Stile würden wie folgt aussehen:
@media (min-width: 45em) {
main {
display: flex;
flex-direction: row;
}
main article {
flex: 2;
}
main aside {
flex: 1;
}
}
Die Flexbox-Version erfordert jedoch mehr CSS. Für jede Spalte gibt es eine eigene Regel, die angibt, wie viel Speicherplatz sie einnehmen sollte. Im Rasterbeispiel werden dieselben Informationen in einer Regel für das enthaltende Element gekapselt.
Benötigen Sie eine Medienabfrage?
Sie müssen nicht immer eine Medienabfrage verwenden. Medienabfragen funktionieren gut, wenn Sie Änderungen auf einige Elemente Wenn das Layout jedoch häufig aktualisiert werden muss, könnten Ihre Medienabfragen mit vielen Haltepunkten aus dem Ruder geraten.
Angenommen, Sie haben eine Seite voller Kartenkomponenten.
Die Karten sind nie breiter als 15em
und Sie möchten so viele Karten in eine Zeile einfügen, wie passen.
Sie könnten Medienabfragen mit den Haltepunkten 30em
, 45em
, 60em
,
aber das ist mühsam und schwer zu verwalten.
Stattdessen können Sie Regeln anwenden, damit die Karten automatisch den richtigen Platz einnehmen.
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
grid-gap: 1em;
}
Ein ähnliches Layout können Sie mit der Flexbox erzielen. Wenn nicht genügend Karten für die letzte Zeile vorhanden sind, werden die übrigen Karten so gedehnt, dass der verfügbare Platz ausgefüllt wird und sie nicht in Spalten angeordnet sind. Wenn Sie Zeilen und Spalten ausrichten möchten, verwenden Sie ein Raster.
.cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1em;
}
.cards .card {
flex-basis: 15em;
flex-grow: 1;
}
Durch die Anwendung einiger intelligenter Regeln in Flexbox oder Raster können Sie dynamische Makrolayouts mit minimalem CSS-Code und ohne Medienabfragen entwerfen. Das ist weniger Arbeit für Sie – Sie lassen stattdessen den Browser die Berechnungen durchführen. Beispiele für moderne CSS-Layouts, die flexibel gestaltet sind, ohne dass Medienabfragen erforderlich sind, finden Sie unter 1linelayouts.com.
Wissen testen
Testen Sie Ihr Wissen über Makro-Layouts.
Welcher Satz beschreibt Makro-Layouts am besten?
Makro-Layouts verwenden immer Medienabfragen, um sich an verschiedene Bildschirmgrößen anzupassen?
Sie haben jetzt einige Ideen für Makro-Layouts auf Seitenebene. auf die Komponenten auf der Seite. Dies ist das Reich der Mikrolayouts.