Das Problem mit Prozentsätzen in CSS

Vor nicht allzu langer Zeit waren wir völlig auf die Verwendung von Prozentsätzen für Breiten und Höhen angewiesen. Die Verwendung von Prozentsätzen bedeutete, dass Ihr Layout und Ihre Elemente eine Höhe und Breite basierend auf dem Ansichtsfenster annehmen konnten. Da sich modernes CSS jedoch ständig weiterentwickelt, sind wir an einem Punkt angelangt, an dem es möglicherweise sogar eine gute Idee ist, die Verwendung von Prozentsätzen zu vermeiden.

Erfahren Sie mehr über die häufigsten Probleme, die bei der Verwendung von Prozentsätzen auftreten. Informieren Sie sich auch über die modernen CSS-Techniken, die anstelle von Prozentsätzen verwendet werden können. Mit diesen Techniken erhalten Sie das gleiche Ergebnis wie Prozentzahlen, ohne deren Nachteile.

Ein sehr einfaches Rasterbeispiel

Betrachten Sie dieses HTML-Layout, um ein Problem mit Prozenteinheiten zu veranschaulichen:

<divKlasse="Containermein-Gitter">
 <divKlasse="Rasterelement">
div>
 <divKlasse="Rasterelement">
div>
div>

Das äußere Element ist ein Basic div Containerelement mit zwei div Kinder. Jedes Kind hat ein Rasterelement Klasse. Um den Container in ein Raster mit zwei Spalten (zwei Feldern) umzuwandeln, müssen wir den folgenden CSS-Code anwenden:

Körper {
Hintergrundfarbe: Schwarz;
align-items: Center;
Rechtfertigungsinhalt: Flex-Start;
}
.mein-Gitter {
Anzeige: Netz;
Rastervorlagenspalten: 50% 50%;
Rand: 3rem;
Grenze: 2pxsolideGold;
Polsterung: 1rem;
}
.grid-item {
Grenze: 3pxsolideGold;
Polsterung: 10rem 0;
Hintergrund: Blau;
}

Jede Spalte (Rasterelement) hat also die Hintergrundfarbe Gold. Auf der übergeordneten Containerklasse legen wir fest Rastervorlagenspalte bis 50 % für jede Spalte. Dadurch nehmen beide Boxen 50 % der Gesamtbreite des Containerelements ein.

Hier ist das Ergebnis:

Es gibt jedoch Probleme mit dieser Ausrichtung. Erstens, wenn Sie sich entschieden haben, ein hinzuzufügen Lücke Zum übergeordneten Gitter könnte das untergeordnete Element seitlich überlaufen. Zum Beispiel, wenn Sie hinzufügen würden Lücke: 3px zum .mein-Gitter Block im CSS, dann würde das Layout so aussehen:

Wie Sie im Bild oben sehen können, hat sich die rechte Box aus dem Container bewegt. Manchmal bemerken Sie es möglicherweise nicht, weil Ihr Abstand klein genug ist, was zu einem seltsamen Ausrichtungsproblem führt. Wenn Sie jedoch eine größere Lücke hatten, wird die Überlappung ziemlich deutlich.

Wenn Sie Prozentsätze verwenden und Margen oder Lücken hinzufügen, besteht ein großes Risiko, dass solche Fehler auftreten. Aber warum tritt der Fehler auf?

Das liegt daran, dass jede Spalte 50 % der übergeordneten Spalte ausmacht. Im obigen Beispiel haben wir 50 % plus 50 % plus die Lücke (3 Pixel), die die Box aus dem Container drückt.

Beachten Sie, dass dieser Fehler nicht nur bei 50-50 auftritt. Sie können die erste Spalte auf 75 % und die zweite Spalte auf 25 % einstellen, und der Fehler tritt weiterhin auf. Aus diesem Grund müssen Sie die folgende Lösung häufiger verwenden.

Die Lösung mit Bruchwerten

Die Lösung besteht darin, Bruchwerte anstelle von Prozentsätzen zu verwenden. Anstatt also die erste Spalte auf 75 % und die zweite auf 50 % einzustellen, können Sie die erste Spalte auf 3 Fr und die zweite Spalte auf 1 Fr festlegen:

Rastervorlagenspalten: 3Fr 1Fr

Dadurch wird das gleiche Verhältnis wie im ersten Beispiel beibehalten. Aber der Vorteil der Verwendung Fr liegt darin, dass sie nur einen Bruchteil des verfügbaren Platzes beanspruchen. In diesem Fall nimmt die erste Spalte drei Teile des Platzes ein, während die zweite Spalte einen Teil einnimmt, ohne die Lücke.

Ein weiterer Vorteil der Verwendung von Frs gegenüber Prozentsätzen – oder anderen absolute Einheiten, wie px oder em– besteht darin, dass Sie sie mit festen Werten kombinieren können. Hier ist ein Beispiel:

Rastervorlagenspalten: 1fr 10rem;

Mit dem obigen Code erhalten Sie einen festen Wert, der sich unabhängig von der Bildschirmgröße nie ändert. Dies liegt daran, dass die Spalte auf der rechten Seite immer bei 10rem bleibt, während die Spalte auf der linken Seite den verbleibenden Platz (abzüglich der Lücke) einnimmt.

Manchmal kommt man mit der Verwendung von Prozentsätzen durch. Aber man muss sie auf intelligente Weise nutzen, die sich dennoch an die Situation anpassen lässt. Oftmals bedeutet dies, sie mit einem zu kombinieren Fr Wert.

Ein realistischeres Beispiel

Stellen wir uns vor, dass Sie eine Seite haben, die den Hauptinhaltsbereich und einen Nebenbereich (für verwandte Beiträge) umfasst. Der Hauptinhaltsbereich nimmt drei Bruchteile des Bildschirms ein, während der Randbereich den verbleibenden Platz abzüglich der Lücke einnimmt:

.Container {
Breite: 100%;
Anzeige: Netz;
Rastervorlagenspalten: 3Fr 1Fr;
Lücke: 1.5rem;
}
.Karte {
Hintergrundfarbe: #5A5A5A;
Polsterung: 10px;
Rand unten: .5rem;
}

Hier ist das Ergebnis:

Normalerweise verschieben Sie die Seitenleiste (oder zur Seite) an den unteren (oder oberen) Rand der Seite, sobald der Bildschirm zu schmal wird. Das bedeutet, Medienabfragen einzurichten, die alles übereinander stapeln, wenn das Ansichtsfenster einen bestimmten Haltepunkt erreicht.

So können Sie alles in einer Spalte stapeln, wenn das Ansichtsfenster 55 cm oder weniger erreicht:

@Medien(maximale Breite: 55em) {
.Container {
Anzeige: biegen;
Flex-Richtung: Spalte;
 }
}

Und das Ergebnis wird in etwa so aussehen:

Jetzt möchten Sie nicht, dass sich jede Karte über die Breite des gesamten Ansichtsfensters erstreckt. Vielmehr sollten die Karten nebeneinander angezeigt werden. Dies erreichen Sie am besten mit CSS-Grids. Aber anstatt feste Breitenwerte (wie 50 %) für die Rastervorlagenspalte festzulegen, verwenden Sie die wiederholen() Funktion wie folgt:

.sidebar-grid {
Anzeige: Netz;
Rastervorlagenspalten: wiederholen(automatisch anpassen, Minimal Maximal(25rem, 1Fr));
Inhalt ausrichten: Start;
Lücke: 2rem;
}

Dieses CSS legt eine Mindestgröße von 25rem und eine Höchstgröße von 1fr fest. Dieser Ansatz ist viel besser als das Festlegen fester Breiten, da er auf der intrinsischen Größenanpassung beruht. Mit anderen Worten: Der Browser kann die Dinge anhand der verfügbaren Parameter herausfinden.

Wenn Sie nun das Browserfenster auf eine bestimmte Breite verkleinern, wird das Rasterfeld automatisch auf zwei Felder pro Zeile angepasst.

Wenn der Bildschirm kleiner wird, sinkt er auf ein Kästchen pro Zeile. Der Browser stapelt also alles übereinander. All dies geschieht, wenn Sie die Fenstergröße ändern. Sie können eine Browserfunktion wie verwenden Chrome DevTools, um zu verstehen, wie dieses CSS funktioniertund wie sich durch die Größenänderung der Fenster das Layout ändert.

Das Beste daran ist, dass Sie keine Containerabfrage oder irgendetwas Besonderes benötigen, um das Element reaktionsfähig zu machen. Einfach ein Raster festlegen und verwenden Minimal Maximal() um Bruchwerte anstelle fester Größen festzulegen.

Erfahren Sie mehr über CSS Grid

Wenn Sie mit CSS gut umgehen wollen, müssen Sie über fundierte Kenntnisse von CSS-Grids verfügen. Gitter können bei richtiger Verwendung sehr leistungsstark sein. Mit Grids können Sie nahezu jedes gewünschte Layout erreichen. Dies macht es zu einem unverzichtbaren Werkzeug in CSS.

Bei der Verwendung von CSS-Rastern sollten Sie Folgendes beachten: Achten Sie auf die Reaktionsfähigkeit. Sie können auch den fraktionierten Ansatz verwenden, um Kollisionen zwischen Elementen zu vermeiden. Denken Sie daran, CSS-Raster zu beherrschen, denn der Layoutstil wird Ihnen beim Erstellen von Websites enorm helfen.