Beispielcode eines CSS-responsiven Layoutsystems

Responsive Layoutsysteme sind in den heute gängigen CSS-Frameworks bereits weit verbreitet. Es besteht im Wesentlichen aus einer Containerklasse und einem Rastersystem mit einer festgelegten Anzahl von Zeilen und Spalten, die das Grundgerüst eines Frameworks bilden.

Dies spiegelt sich in den beliebten Front-End-Frameworks Bootstrap und Bulma CSS wider. Wie Bootstrap‘s .container, .row, .col; und Bulma CSS‘ .container, columns, column stellen alle diese Art von Layoutsystem dar. Auch wenn die Namen unterschiedlich sind, sind die Prinzipien dieselben.

Aufgrund der Popularität des Flex-Layouts entscheiden sich fast alle modernen Rastersystemimplementierungen für die Verwendung dieser flexiblen Layoutmethode.

Sehen wir uns nun an, wie ein minimales, CSS-responsives Layoutsystem implementiert wird.

Beginnen wir mit dem Container.

Um die Einfachheit des Implementierungscodes zu gewährleisten, wird dieser Artikel in SCSS geschrieben. Wenn Sie mit SCSS nicht vertraut sind, machen Sie sich keine Sorgen, die verwendeten Wissenspunkte werden im Text vorgestellt.

Container

Container werden hauptsächlich verwendet, um den Hauptinhalt einer Webseite zu umschließen. Der allgemeine Effekt besteht darin, den Inhalt in der Mitte des Bildschirms anzuzeigen.

Wir verwenden .container, um den Container anzugeben.

Erstens wird der Container horizontal zentriert, was relativ einfach zu gestalten ist:

.container {
    Rand links: automatisch;
    Rand rechts: automatisch;
}

Der sogenannte responsive Container ermittelt den vom Container verwendeten Maximalbreitenwert basierend auf verschiedenen Haltepunkten, also der aktuellen Ansichtsfensterbreite.

Hier beziehen wir uns auf die Definition von Haltepunkten in Bootstrap und unterteilen sie entsprechend der Ansichtsfensterbreite in die folgenden Kategorien:

[0, 576px)
[576px, 768px]
[768px, 992px]
[992px, 1200px]
[1200px, +∞)

Deklarieren Sie zur Haltepunktdefinition eine Variable $breakpoints:

$Haltepunkte: (
    // Extra kleiner Bildschirm / Telefon
    xs: 0,
    // Kleiner Bildschirm / Telefon
    Größe: 576px,
    // Mittlerer Bildschirm / Tablet
    md: 768px,
    // Großer Bildschirm / Desktop
    lg: 992px,
    // Extra großer Bildschirm / breiter Desktop
    xl: 1200px
);

$breakpoints wird als „Liste“ bezeichnet und ist eine Datenstruktur, die uns von SCSS bereitgestellt wird. Es besteht aus Schlüssel:Wert-Paaren. Der Schlüssel im obigen Beispiel gibt den Startpunkt des gültigen Bereichs des Geräts an.

Der Container hat für verschiedene Geräte unterschiedliche Maximalbreitenwerte. Daher deklarieren wir hier eine weitere Variable $container-max-widths, um die Containerbreite darzustellen:

$container-max-widths: (
    xs: keine,
    Größe: 540px,
    md: 720px,
    Größe: 960px,
    xl: 1140px
);

Hier ist $container-max-widths ebenfalls eine Liste, und der Schlüssel stellt hier die maximale Breite des Containers unter einem bestimmten Gerät dar. Beispielsweise beträgt die maximale Breite des Containers auf Geräten mit sehr großen Bildschirmen 1140 Pixel. Auf normalen Mobiltelefonen ist die maximale Breite des Containers jedoch nicht festgelegt und der Standardwert lautet „Keine“.

Nachdem wir nun eine Umsetzungsidee haben, können wir mit der Umsetzung beginnen.

Wir können die Media-Query-Direktive @media verwenden, um .container je nach Bereich der Ansichtsfensterbreite unterschiedliche Maximalbreitenwerte zuzuweisen.

@each $device, $breakpoint in $breakpoints {
    @media nur Bildschirm und (Mindestbreite: $breakpoint) {
        .container {
            maximale Breite: Map-Get ($Container-Max-Breiten, $Gerät);
        }
    }
}

7 Zeilen Code und fertig!

Der obige Code wird unten erläutert.

Wir verwenden die Syntax @each...in, um die Liste zu durchlaufen und jedes Mal den entsprechenden Schlüssel und Wert herauszunehmen, um das aktuelle $device und den aktuellen $breakpoint zu erhalten. Map-get ist eine von SCSS bereitgestellte Methode zum Bearbeiten von Listen: Rufen Sie den Wert entsprechend dem Schlüssel ab. Wenn beispielsweise der Wert von $device xs ist, ist der entsprechende Wert von map-get($container-max-widths, $device) none; wenn der Wert von $device sm ist, ist der entsprechende Wert von map-get($container-max-widths, $device) 540px und so weiter.

Der in @media only screen and (min-width: $breakpoint) { ... } enthaltene Code gibt den CSS-Stil an, der ab dem aktuellen Geräte-Haltepunkt angewendet werden soll. Wenn wir zwei Medienabfragen für Haltepunkte gleichzeitig in aufsteigender Reihenfolge festlegen, überschreibt die letztere den Stil der ersteren. Dies ist das Kernprinzip zum Erreichen von Containern mit unterschiedlichen Breiten unter verschiedenen Ansichtsfenstern.

Weisen Sie als Nächstes den erhaltenen Breitenwert der Eigenschaft „max-width“ des Containers zu.

Bisher haben wir einen responsiven Container geschrieben. Werfen wir einen Blick auf den Code:

$Haltepunkte: (
    // Extra kleiner Bildschirm / Telefon
    xs: 0,
    // Kleiner Bildschirm / Telefon
    Größe: 576px,
    // Mittlerer Bildschirm / Tablet
    md: 768px,
    // Großer Bildschirm / Desktop
    lg: 992px,
    // Extra großer Bildschirm / breiter Desktop
    xl: 1200px
);
$container-max-widths: (
    xs: keine,
    Größe: 540px,
    md: 720px,
    Größe: 960px,
    xl: 1140px
);
.container {
    Rand links: automatisch;
    Rand rechts: automatisch;
}
@each $device, $breakpoint in $breakpoints {
    @media nur Bildschirm und (Mindestbreite: $breakpoint) {
        .container {
            maximale Breite: Map-Get ($Container-Max-Breiten, $Gerät);
        }
    }
}

Klicken Sie hier, um den Effekt zu sehen.

Als Nächstes stellen wir das 12-Spalten-Rasterlayout vor.

12-Spalten-Rasterlayout

Verwenden Sie zunächst das Flex-Layout, um ein einfachstes Layout mit gleicher Breite zu schreiben.

.Reihe {
    Anzeige: Flex;
    
    .col {
        Flex-Wachstum: 1;
        Flex-Basis: 0;
    }
}

Das ist richtig, dies ist der gesamte Code zur Implementierung eines Layouts mit einheitlicher Breite mithilfe des Flex-Layouts. Wenn Sie die Leerzeilen dazwischen ignorieren, sind es nur 7 Codezeilen.

Das Prinzip hierbei ist, dass wir die Flex-Basis aller Flex-Elemente auf 0 setzen, was bedeutet, dass diese Flex-Elemente vor dem Wachsen oder Schrumpfen keine Breite haben und immer gleich lang sind. Auf diese Weise wird der endgültig berechnete Hauptachsenraum gleichmäßig auf alle Flex-Elemente verteilt, sodass sie die gleiche Breite haben.

Das einfache Rasterlayout, das wir bisher geschrieben haben, weist zwei Einschränkungen auf:

1. Elemente mit unterschiedlicher Breite können nicht ausgelegt werden.
2. Zeilenumbruch wird nicht unterstützt.

Zeilenumbrüche sind ganz einfach. Fügen Sie einfach „flex-wrap: wrap“ zum Flex-Container hinzu. Wie gehen wir also mit dem Layout von „Elementen ungleicher Breite“ um?

Um das Layout von Elementen mit ungleicher Breite zu erreichen, lautet unsere Idee: Deaktivieren Sie die Dehnungseigenschaften von Flex-Elementen und verwenden Sie die prozentuale Breite, um die Breite anzugeben.

Deaktivieren Sie zunächst die Flex-Funktion des Flex-Projekts. Die verwendeten Eigenschaften sind wie folgt:

Flex-Schrumpfen: 0;
Flex-Wachstum: 0;
Flex-Basis: 0;

Die Abkürzung zum äquivalenten Schreiben dieser drei Eigenschaften lautet:

flex: none;

Verwenden Sie dann die prozentuale Breite, um die Breite anzugeben.

Wir implementieren ein Rasterlayout mit maximal 12 Spalten in einer Zeile. Das heißt, eine Zeile ist in 12 Spalten unterteilt und die Breite jeder Spalte beträgt ungefähr 8,33 % der Gesamtbreite. Wir verwenden .is-columns, um die Anzahl der Spalten anzugeben, die ein Element einnehmen soll:

.ist-1
.ist-2
.ist-3
.ist-4
.ist-5
.ist-6
.ist-7
.ist-8
.ist-9
.ist-10
.ist-11
.ist-12

Nach dieser Regel können wir den Code für das Rasterlayout einfach schreiben:

$Spalten: 12;

.Reihe {
    Anzeige: Flex;
    
    .col {
        Flex-Wachstum: 1;
        Flex-Basis: 0;
        
        @für $i von 1 bis 12 {
            &.ist-#{$i} {
                Flex: keine;
                Breite: Prozentsatz($i / 12);
            }
        }
    }
}

Hier verwenden wir @for $var from <start> through <end> der @for-Direktive, aufsteigend von 1 bis 12, und definieren eine Reihe von Klassennamen wie .is-*. Das Prinzip besteht darin, die elastischen Eigenschaften des Flex-Elements wie gesagt zu deaktivieren und ihm eine prozentuale Breite zuzuweisen. Wie wäre es, es ist ganz einfach, oder?

Als nächstes fügen wir Unterstützung für Zeilenumbrüche ( .row.is-multiline ) und Flex-Item-Offsets ( .is-offset-* ) hinzu.

Schauen wir uns den Code an:

$Spalten: 12;

.Reihe {
    Anzeige: Flex;
    
    &.ist-mehrzeilig {
        Flex-Wrap: Umwickeln;   
    }
    
    .col {
        Flex-Wachstum: 1;
        Flex-Basis: 0;
        
        @für $i von 1 bis 12 {
            &.ist-#{$i} {
                Flex: keine;
                Breite: Prozentsatz($i / 12);
            }
            &.ist-Offset-#{$i} {
                Rand links: Prozentsatz($i / 12);
            }
        }
    }
}

.is-multiline wird mit .row verwendet, um den Effekt von Flex-Wrap zu erzielen: Wrap; der Elementversatz erfolgt mit margin-left
Immobilienimplementierung.

An diesem Punkt ist unser 12-Spalten-Rasterlayout vollständig ヾ(◍°∇°◍)ﾉﾞ

Vollständiger Code

Wenn wir die beiden oben genannten Codeteile kombinieren, erhalten wir ein minimales responsives Layoutsystem ~ O(∩_∩)O

$Haltepunkte: (
    // Extra kleiner Bildschirm / Telefon
    xs: 0,
    // Kleiner Bildschirm / Telefon
    Größe: 576px,
    // Mittlerer Bildschirm / Tablet
    md: 768px,
    // Großer Bildschirm / Desktop
    lg: 992px,
    // Extra großer Bildschirm / breiter Desktop
    xl: 1200px
);
$container-max-widths: (
    xs: keine,
    Größe: 540px,
    md: 720px,
    Größe: 960px,
    xl: 1140px
);
.container {
    Rand links: automatisch;
    Rand rechts: automatisch;
}
@each $device, $breakpoint in $breakpoints {
    @media nur Bildschirm und (Mindestbreite: $breakpoint) {
        .container {
            maximale Breite: Map-Get ($Container-Max-Breiten, $Gerät);
        }
    }
}
$Spalten: 12;
.Reihe {
    Anzeige: Flex;
    &.ist-mehrzeilig {
        Flex-Wrap: Umwickeln;   
    }
    .col {
        Flex-Wachstum: 1;
        Flex-Basis: 0;
        @für $i von 1 bis 12 {
            &.ist-#{$i} {
                Flex: keine;
                Breite: Prozentsatz($i / 12);
            }
            &.ist-Offset-#{$i} {
                Rand links: Prozentsatz($i / 12);
            }
        }
    }
}

Den Effekt können Sie hier betrachten.

Natürlich können Sie nach Belieben weitere umfangreiche Funktionen hinzufügen. Hier stellen wir nur eine einfachste Codeimplementierung bereit.

Zusammenfassen

Oben sehen Sie den Beispielcode des vom Herausgeber eingeführten CSS-responsiven Layoutsystems. Ich hoffe, er ist für alle hilfreich. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!