Viele Studenten des Responsive Webdesigns haben Schwierigkeiten, Prozentwerte für Breitenwerte zu verwenden. Insbesondere gibt es Verwirrung darüber, wie der Browser diese Prozentsätze berechnet. Unten finden Sie eine detaillierte Erklärung, wie Prozentsätze für Breitenberechnungen in einer responsiven Website funktionieren.
Verwenden von Pixeln für Breitenwerte
Wenn Sie verwenden Pixel als Breitenwert sind die Ergebnisse sehr einfach. Wenn du benutzt CSS Um den Breitenwert eines Elements in der Kopfzeile eines Dokuments auf 100 Pixel Breite zu setzen, wird dieses Element das dieselbe Größe wie eine, die Sie im Inhalt der Website oder in der Fußzeile oder in anderen Bereichen der Seite auf 100 Pixel breit eingestellt haben. Pixel sind ein absoluter Wert, also 100 Pixel sind 100 Pixel, egal wo in Ihrem Dokument ein Element erscheint. Leider sind Pixelwerte zwar leicht zu verstehen, funktionieren jedoch nicht gut mit responsiven Websites.
Ethan Marcotte hat den Begriff geprägt „Responsive Webdesign“, das diesen Ansatz so erklärt, dass er 3 Hauptprinzipien enthält:
- Ein flüssiges Gitter
- Flüssige Medien
- Medien-Anfragen
Diese ersten beiden Punkte, ein flüssiges Raster und flüssige Medien werden durch die Verwendung von Prozentsätzen anstelle von Pixeln für die Größenanpassung erreicht.
Verwenden von Prozentsätzen für Breitenwerte
Wenn Sie Prozentsätze verwenden, um eine Breite für ein Element festzulegen, hängt die tatsächliche Größe des Elements davon ab, wo es sich im Dokument befindet. Prozentsätze sind ein relativer Wert, d. h. die angezeigte Größe ist relativ zu anderen Elementen in Ihrem Dokument.
Wenn Sie beispielsweise die Breite von an Bild bis 50 % bedeutet dies nicht, dass das Bild in der Hälfte seiner normalen Größe angezeigt wird. Dies ist ein weit verbreitetes Missverständnis.
Wenn ein Bild tatsächlich 600 Pixel breit ist, bedeutet die Verwendung eines CSS-Werts, um es mit 50 % anzuzeigen, nicht, dass es im Webbrowser 300 Pixel breit ist. Dieser Prozentwert wird basierend auf dem Element berechnet, das dieses Bild enthält, nicht auf der tatsächlichen Größe des Bilds selbst. Wenn der Container (bei dem es sich um eine Division oder ein anderes HTML-Element handeln könnte) 1000 Pixel breit ist, wird das Bild mit 500 Pixeln angezeigt, da dieser Wert 50 % der Containerbreite beträgt. Wenn das enthaltende Element 400 Pixel breit ist, wird das Bild nur mit 200 Pixeln 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 die Bildschirmgröße/Geräteänderungen. Wenn Sie dies physisch, nicht im Web, betrachten, ist es, als hätten Sie einen Karton, den Sie mit Verpackungsmaterial füllen. Wenn Sie sagen, dass der Karton zur Hälfte mit diesem Material gefüllt sein soll, variiert die Verpackungsmenge, die Sie benötigen, je nach Größe des Kartons. 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 Wirklichkeit 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.
Angenommen, Sie haben eine Website, bei der die gesamte Website in einer Abteilung mit einer Klasse von "Containern" enthalten ist (eine gängige Webdesign-Praxis). Innerhalb dieser Unterteilung befinden sich drei weitere Unterteilungen, die Sie schließlich so gestalten, dass sie als 3 vertikale Spalten angezeigt werden.
Jetzt können Sie CSS verwenden, um die Größe dieser „Container“-Abteilung auf 90% festzulegen. In diesem Beispiel hat die Container-Division kein anderes Element, das sie umgibt, außer dem Körper, den wir nicht auf einen bestimmten Wert festgelegt haben. Standardmäßig wird der Körper als 100 % des Browserfensters gerendert. Daher basiert der Prozentsatz der Abteilung „Container“ auf der Größe des Browserfensters. Wenn sich die Größe dieses Browserfensters ändert, ändert sich auch die Größe dieses „Containers“. Wenn das Browserfenster also 2000 Pixel breit ist, wird diese Unterteilung mit 1800 Pixeln angezeigt. Dies wird als 90-Prozent von 2000 (2000 x .90 = 1800)) berechnet, was der Größe des Browsers entspricht.
Wenn jede der innerhalb des „Containers“ gefundenen „col“-Unterteilungen auf eine Größe von 30 % gesetzt wird, dann sind sie in diesem Beispiel jeweils 540 Pixel breit. Dies wird als 30 % der 1800 Pixel berechnet, die der Container mit (1800 x 0,30 = 540) rendert. Wenn wir den Prozentsatz dieses Containers ändern, würden sich diese inneren Unterteilungen auch in der Größe ändern, in der sie gerendert werden, da sie von diesem Containerelement abhängig sind.
Nehmen wir an, die Browserfenster bleiben auf 2000 Pixel breit, aber wir ändern den Prozentwert des Containers auf 80% statt auf 90%. Das bedeutet, dass es jetzt mit 1600 Pixel Breite gerendert wird (2000 x .80 = 1600). Auch wenn wir das CSS für die Größe unserer 3 „col“-Abteilungen nicht ändern und sie bei 30% belassen, werden sie they jetzt anders rendern, da ihr enthaltendes Element, das ist der Kontext, nach dem sie skaliert werden, geändert. Diese 3 Unterteilungen werden nun jeweils mit einer Breite von 480 Pixel gerendert, was 30 % von 1600 oder der Größe des Containers 1600 x 0,30 = 480 entspricht.
Wenn sich ein Bild innerhalb einer dieser „col“-Unterteilungen befindet und dieses Bild mit einem Prozentsatz bemessen wurde, wäre der Kontext für seine Größenanpassung das „col“ selbst. Wenn sich die Größe dieser „col“-Unterteilung änderte, änderte sich auch das Bild darin. Wenn sich also die Größe des Browsers oder des „Containers“ ändert, wirkt sich dies auf die drei „col“-Unterteilungen aus, was wiederum Ändern Sie die Größe des Bildes innerhalb der "col." Wie Sie sehen, hängt das alles zusammen, wenn es um die prozentuale Dimensionierung geht Werte.
Wenn Sie bedenken, wie ein Element innerhalb einer Webseite gerendert wird, wenn ein Prozentwert für seine Breite verwendet wird, müssen Sie den Kontext verstehen, in dem sich dieses Element im Markup der Seite befindet.
Zusammenfassend
Prozentsätze spielen eine entscheidende Rolle bei der Erstellung des Layouts für responsive Websites. Egal, ob Sie die Größe von Bildern responsiv anpassen oder prozentuale Breiten verwenden, um ein wirklich flüssiges Raster zu erstellen, dessen Größen relativ zueinander sind, ist es notwendig, diese Berechnungen zu verstehen, um das von Ihnen gewünschte Aussehen zu erreichen Verlangen.