Längenmaße: Absolute und relative Einheiten in CSS

Unterschiede

Jede CSS-Deklaration enthält ein Paar aus Eigenschaft und Wert. Bei Längen- oder Größenangaben von HTML-Elementen werden numerische Werte verwendet, entweder als ganze Zahl oder als Dezimalzahl:

.box {
  width: 512px;
  font-size: 1.5em;
}

Wenn du dem Verkäufer auf dem Jahrmarkt bittest, dir 12 Äpfel zu verkaufen, dann ist das ein absoluter Wert. Wenn du dir hingegen die Hälfte der Äpfel aus der Kiste nimmst, dann ist das ein relativer Wert, abhängig von der Gesamtanzahl.

Auch in CSS gibt es absolute und relative Werte. Ein Beispiel: Der Bildschirm des Apple-Tablets iPad hat Pixelmaße von 1024x768. Möchtest du jetzt zwei Boxen nebeneinander darstellen und verwendest dabei fixe Werte wie width: 512px, dann wird dir das auf dem Smartphone um die Ohren fliegen. Zum einen sind die Dimensionen des Smartphones kleiner, zum anderen wird die Box auf dem iPad nicht nebeneinander dargestellt, weil der Platz nicht ausreicht.

Wenn du hingegen relative Einheiten wie Prozente (z.B. width: 50%) verwendest, dann passt sich die Box immer an die Größe des Elternelements¹ an. Und das wiederum passt sich an die Größe des eigenen Elternelements an. Das geht so lang weiter bis zum obersten Element, dem Root-Elements² html. Das ist im Übrigen 100 % des Viewport³ breit, also der Breite des Bildschirms. Das folende responsive Beispiel illustriert das:

Relative Einheiten

Die relativen Einheiten unterteilen sich in verschiedene Kategorien, abhängig von dem, woran du dich orientieren möchtest. Die gebräuchlichste Kategorie ist die der relativen Schriftlängen. Hierbei beziehen sich die Einheiten auf die Schriftgröße des Elternelements.

Relative Schriftlängen

Neben der Angabe in Prozent, die du bereits schon kenngelernt hast, gibt es auch noch folgende Einheiten:

em ist dabei die gebräuchliste Einheit. Sie bezieht sich auf die Schriftgröße des Elternelements. 1em entspricht 100 %, 150 % wären dann 1.5em. Schauen wir uns exemplarisch das folgende Beispiel an.

In der Box soll der Fließtext 18 Pixel groß sein, also etwas größer als der Fließtext der anderen Elemente auf der Website. Die Überschrift soll 150 % der Schriftgröße unserer Box betragen.

<section class="announcement">
  <h2>Bekanntmachung</h2>

  Wir treffen uns Freitags in Haus E, Raum 08 (HIWEE08).
</section>

.announcement { font-size: 18px; }
.announcement h2 { font-size: 1.5em; }

Die Überschrift entspräche umgerechnet 27px. Die Formel dazu lautet: 18px * 1,5 = 27px.

Relativ zum Root-Element

Wenn du die 18 Pixel der Announcement-Box vom Beispiel oben ebenfalls relativ angeben möchtest, und das solltest du, dann kannst du das auch mit em tun. Der Haken an der Sache: Wenn du in die Announcement-Box eine weitere Announcement-Box einfügst, dann orientiert sich die zweite an der ersten Box. Desto mehr Boxen du ineinander verschachtelst, desto größer wird jeweils die Schrift. Während 1.5em in der ersten Box 27 Pixel entsprechen, entsprechen 1.5em in der zweiten Box 40.5 Pixel.

Klingt kompliziert und ist es auch. Besser wäre es, die Einheit rem zu verwenden. Das r in rem steht für root und bezieht sich dabei auf das Root-Element. Der Browser gibt vor, dass die Standardgröße für Fließtext 16 Pixel groß ist, kann aber auch vom User in den Einstellungen verändert werden.

Noch einmal zusammengefasst:

em

Die relative Einheit em bezieht sich auf die Schriftgröße des Elternelements. 1em entsprechen 100 %, 150 % wären dann 1.5em.

rem

Die relative Einheit rem bezieht sich auf die Schriftgröße des html- oder body-Elements, das sind in der Regel 16px. Das r in rem steht für root.

Der angepasste Code sieht dann so aus:

.announcement { font-size: 1.125rem; }
.announcement h2 { font-size: 1.688rem; }

Hier einmal eine Gegenüberstellung unserer Announcement-Box, bei der wir (umgerechneet) 18 statt 16 Pixel verwenden:

Übrigens gibt auch von cap, ch, ex und lh eine Variante, die sich auf das Root-Element bezieht. Diese haben dann ein r vorangestellt, also rch statt ch.

Unter Assets habe ich dir ein paar Links zu Tools interlegt, mit denen du die Größen berechnen kannst.

Relativ zum Viewport

Der Vollständigkeit halber möchte ich noch die Einheiten erwähnen, die sich auf den Viewport und auf den Container beziehen. Das ist für dich am Anfang noch nicht sonderlich relevant, du wirst aber früher oder später in komplexeren Layouts darüber stolpern.

Relativ zum Container

Längen, die sich auf einen Query-Container⁵ beziehen, sind:

Aufgabe

Um die relative Einheiten besser zu verstehen, probiere doch einmal, die Announcement-Box mit den oberen CSS nachzubauen. Verwende erst px und em und teste das Ergebnis im Browser durch Verkleinern und Vergrößern des Fensters. Anschließend ersetze die Einheiten durch rem und beobachte den Unterschied.

• Verwendete Tags:
• css