Prozentsätze für Breitenberechnungen in einer responsiven Site

Viele Studenten des responsiven Webdesigns haben Schwierigkeiten, Prozentwerte für Breitenwerte zu verwenden. Insbesondere gibt es Verwirrung darüber, wie der Browser diese Prozentsätze berechnet. Nachfolgend finden Sie eine detaillierte Erklärung, wie Prozentsätze für die Breitenberechnung in einer responsiven Website funktionieren.

Verwenden von Pixeln für Breitenwerte

Wenn Sie Pixel als Breitenwert verwenden, sind die Ergebnisse sehr unkompliziert. Wenn Sie den Breitenwert eines Elements in der Kopfzeile eines Dokuments mit CSS auf 100 Pixel Breite festlegen, hat dieses Element dieselbe Größe wie das Element, das Sie im Inhalt oder auf der Fußzeile der Website oder in anderen Bereichen der Website auf 100 Pixel Breite festgelegt haben Seite. Pixel sind ein absoluter Wert. 100 Pixel sind also 100 Pixel, unabhängig davon, wo in Ihrem Dokument ein Element angezeigt wird. Obwohl Pixelwerte leicht verständlich sind, funktionieren sie leider nicht gut mit responsiven Websites.

Ethan Marcotte prägte den Begriff "Responsive Web Design" und begründete diesen Ansatz mit 3 Hauptprinzipien:

Ein fließendes Gitter
Flüssige Medien
Medien-Anfragen

Diese ersten beiden Punkte, ein Fließgitter und Fließmedien, werden durch die Verwendung von Prozentwerten anstelle von Pixeln zur Größenbestimmung erreicht.

Verwenden von Prozentsätzen für Breitenwerte

Wenn Sie Prozentwerte verwenden, um eine Breite für ein Element festzulegen, hängt die tatsächliche Größe, in der das Element angezeigt wird, davon ab, wo es sich im Dokument befindet. Prozentsätze sind relative Werte, dh die angezeigte Größe ist relativ zu anderen Elementen in Ihrem Dokument.

Wenn Sie beispielsweise die Breite eines Bildes auf 50% festlegen, ist dies nicht der Fall bedeutet, dass das Bild in der Hälfte seiner normalen Größe angezeigt wird. Dies ist ein weit verbreitetes Missverständnis.

Wenn ein Bild nativ 600 Pixel breit ist, bedeutet die Verwendung eines CSS-Werts zur Anzeige bei 50% nicht, dass es im Webbrowser 300 Pixel breit ist. Dieser prozentuale Wert wird basierend auf dem Element berechnet, das dieses Bild enthält, nicht der nativen Größe des Bildes. Wenn der Container (bei dem es sich um eine Division oder ein anderes HTML-Element handeln kann) 1000 Pixel breit ist, wird das Bild mit 500 Pixel angezeigt, da dieser Wert 50% der Breite des Containers beträgt. Wenn das enthaltende Element 400 Pixel breit ist, wird das Bild nur mit 200 Pixel angezeigt, da dieser Wert 50% des Containers beträgt. Das fragliche Bild hat hier eine Größe von 50%, die vollständig von dem Element abhängt, das es enthält.

Denken Sie daran, dass responsives Design fließend ist. Layouts und Größen ändern sich, wenn sich die Bildschirmgröße / das Gerät ändert. Wenn Sie darüber nachdenken, nicht in Bezug auf das Internet, ist es, als hätten Sie einen Karton, den Sie mit Verpackungsmaterial füllen. Wenn Sie sagen, dass die Schachtel zur Hälfte mit diesem Material gefüllt sein sollte, hängt die Menge der benötigten Verpackung von der Größe der Schachtel ab. Gleiches gilt für prozentuale Breiten im Webdesign.

Prozentsätze basierend auf anderen Prozentsätzen

Im Bild- / Container-Beispiel haben wir Pixelwerte für das enthaltende Element verwendet, um zu zeigen, wie das responsive Bild angezeigt wird. In der Realität würde das enthaltende Element auch als Prozentsatz festgelegt, und das Bild oder andere Elemente in diesem Container würden ihre Werte basierend auf einem Prozentsatz eines Prozentsatzes erhalten.

Hier ist ein weiteres Beispiel, das dies in der Praxis zeigt.

Angenommen, Sie haben eine Website, auf der die gesamte Website innerhalb einer Abteilung mit einer Klasse von "Containern" enthalten ist (eine übliche Webdesignpraxis). In dieser Division befinden sich drei weitere Divisionen, die Sie schließlich als 3 vertikale Spalten anzeigen lassen. Das HTML kann so aussehen:

Jetzt können Sie CSS verwenden, um die Größe dieser Container-Abteilung auf 90% festzulegen. In diesem Beispiel enthält die Containerabteilung kein anderes Element als den Hauptteil, das nicht auf einen bestimmten Wert festgelegt wurde. Standardmäßig wird der Body als 100% des Browserfensters dargestellt. Daher hängt der Prozentsatz der „Container“ -Division von der Größe des Browserfensters ab. Mit der Größe dieses Browserfensters ändert sich auch die Größe dieses "Containers". Wenn das Browserfenster also 2000 Pixel breit ist, wird diese Unterteilung bei 1800 Pixel angezeigt. Dies wird als 90% von 2000 (2000 x .90 = 1800) berechnet, was der Größe des Browsers entspricht.

Wenn jede der "col" -Divisionen, die im "Container" gefunden werden, auf eine Größe von 30% eingestellt ist, ist in diesem Beispiel jede von ihnen 540 Pixel breit. Dies wird als 30% der 1800 Pixel berechnet, die der Container darstellt (1800 x .30 = 540). Wenn wir den Prozentsatz dieses Containers ändern, ändern sich auch die Größe der inneren Unterteilung, in der sie gerendert werden, da sie von dem Element abhängig sind.

Nehmen wir an, das Browserfenster bleibt 2000 Pixel breit, aber wir ändern den prozentualen Wert des Containers auf 80% anstelle von 90%. Das bedeutet, dass jetzt eine Breite von 1600 Pixel (2000 x .80 = 1600) gerendert wird. Selbst wenn wir das CSS nicht für die Größe unserer 3 "col" -Divisionen ändern und es bei 30% belassen, werden sie jetzt anders dargestellt, da sich ihr enthaltendes Element, dh der Kontext, nach dem sie bemessen sind, geändert hat. Diese 3 Unterteilungen werden jetzt jeweils 480 Pixel breit dargestellt, was 30% von 1600 entspricht, oder der Größe des Containers (1600 x .30 = 480).

Um noch weiter zu sagen: Wenn sich in einer dieser „col“ -Divisionen ein Bild befindet und dieses Bild mit einem Prozentsatz bemessen wurde, würde der Kontext für die Größenbestimmung „col“ sein.Wenn sich die Größe der "col" -Division ändert, ändert sich auch das Bild darin. Wenn sich also die Größe des Browsers oder des „Containers“ ändert, wirkt sich dies auf die drei „col“ -Divisionen aus, wodurch wiederum die Größe des Bildes in der „col“ -Ansicht geändert wird verbunden, wenn es um prozentuale Bemessungswerte geht.

Wenn Sie überlegen, wie ein Element innerhalb einer Webseite gerendert wird, wenn ein Prozentwert für die Breite verwendet wird, müssen Sie den Kontext verstehen, in dem sich dieses Element im Markup der Seite befindet.

In Summe

Prozentsätze spielen eine wichtige Rolle beim Erstellen des Layouts für responsive Websites. Unabhängig davon, ob Sie die Größe der Bilder ändern oder prozentuale Breiten verwenden, um ein wirklich fließendes Gitter zu erstellen, dessen Größen relativ zueinander sind. Das Verständnis dieser Berechnungen ist erforderlich, um das gewünschte Aussehen zu erzielen.