CSS units: px, %, vw, vh, em und was Sinn macht

Lerne in diesem CSS Tutorial, welche CSS units dir am meisten bringen und wie du sie einsetzt - und auch einige seltener verwendete Einheiten.Tags: | | | | | | |
Noch nicht sicher genug im Webdesign? Lass dir in unseren Programmier-Kursen in Kirchdorf oder unserer Wichtel-Webdesign-Agentur in Pettenbach weiterhelfen!

Worum geht´s?

In diesem kurzen Tutorial werden wir uns mit CSS units beschäftigen – also in welcher CSS Einheit wir die Längen, Breiten und Höhen unserer HTML-Elemente bestimmen können. Genauso wie es z.B. bei Längeneinheiten verschiedene Maße wie z.B. Kilometer oder Zoll gibt, gilt das auch für CSS.

Egal, welche CSS Einheit nun verwendet wird – du kannst sie z.B. immer bei CSS-Befehlen wie width oder height einsetzen:

p {
   width: 600px;
   height: 20%;
}

Es ändert sich, wenn wir von CSS units sprechen, jeweils nur die rechte Seite von unserem Doppelpunkt, und nur das, was hinter der eigentlichen Zahl steht.

Wobei das streng genommen nicht ganz stimmt – die Einheit bestimmt natürlich auch, was vor der Einheit steht. Wenn wir in Pfund rechnen, wird die Anzahl der Pfund doppelt so groß sein als die Anzahl in Kilogramm.

Aber nun zu unseren CSS units selbst:

1. Eine Liste der wichtigsten CSS units

An sich gibt es unzählige mögliche CSS units – hier sollen nur die wichtigsten vorgestellt werden.

1.1 Keine CSS unit, nur die Zahl (z.B. beim CSS-Befehl opacity)

Viele CSS-Befehle arbeiten ganz ohne Einheiten und brauchen nur eine Zahl.

Der CSS-Befehl opacity z.B. beschreibt die Durchsichtigkeit eines HTML-Elements mit einer Zahl zwischen 1 und 0, ohne CSS Einheit dazu.

1.2 Die CSS unit px: Pixel (=Bildpunkte)

Sehr genaue Einheit, reagiert nicht auf verschiedene Fenstergrößen oder Veränderungen in der Größe von Eltern-Elementen.

Nützlich, wenn z.B. der Text-Bereich einer Website unabhängig von der Fenstergröße immer eine gewisse Breite haben soll, um die Lesbarkeit zu erhöhen.

1.3 Die CSS unit %: Prozent vom Eltern-Element

Die CSS unit % versucht, den jeweiligen WErt basierend auf dem gleichen Wert des Eltern-Elements zu berechnen.

Nehmen wir an, es befindet sich ein DIV1 in einem anderen DIV2, wobei das DIV2 eine width von 300px aufweist.

Das DIV1 bekommt deine width von 80% zugewiesen.

Der Browser berechnet nun die tatsächliche Breite des DIV1, indem er die 300px vom DIV2 mit 80% multipliziert, was 240px ergibt.

Ändert sich die width vom DIV2, ändert sich die Breite vom DIV1 automatisch entsprechend mit.

Manchmal steht der Browser jedoch vor einem Problem: Wenn sich kein Eltern-Element findet, das eine fixe Breite hat, von dem aus man die % berechnen kann.

In diesem Fall versucht er, irgendwo (Eltern-Element vom Eltern-Element vom Eltern-Element usw.) ein HTML-Element zu finden, das eine fixe Breite hat.

Im Notfall nimmt er dann eben die Breite vom <body>-Element.

1.4 Die CSS units vw und vh: Prozent von der Fenster-Breite bzw. Fenster-Höhe

Die CSS units vw und vh funktionieren ähnlich wie die CSS unit %. Aber sie basieren nicht auf dem Eltern-Element, sondern auf der Fenster-Höhe bzw. Fenester-Breite.

100vw bedeutet volle Breite des Browser-Fensters, und 100vh bedeutet volle Höhe des Browser-Fensters.

Die beiden Einheiten können sehr nützlich sein, wenn es um responsive Design geht.

1.5 Die CSS units vmax und vmin: Prozent der größeren/kleineren Fenster-Dimension

Diese beiden CSS units sind den CSS units vw und vh sehr ähnlich, aber mit einem Unterschied:

Sie beziehen ein, dass man z.B. Handybildschirme drehen kann.

Die CSS unit vmax ist egal wie ein Handy oder Tablet gedreht wurde immer die größere Dimension eines Fensters.

Die CSS Einheit vmin steht immer für die kleinere Dimension eines Fensters.

Die Angabe 50vmin bedeutet dann z.B. „50% von der kleineren Dimension des Fensters“.

1.6 Die CSS unit em: Schriftgröße (font-size) des Eltern-Elements

Diese CSS unit kann auch noch recht nützlich sein.

Sie basiert auf der Schriftgröße (font-size) des Eltern-Elements.

Ist die Schriftgröße einer <ul>-Liste z.B. auf 20px eingestellt und die <li>-Elemente haben eine mit 0.8em bekommen, so ist die tatsächlich errechnete Schriftgröße der <li>-Elemente nun 16px (Man rechnet dabei 20 * 0.8 = 16).

Wenn du nun später die Schriftgröße der <ul>-Liste änderst, ändern sich alle <li>-Elemente gleich im richtigen Verhältnis mit.

1.7 Die CSS unit rem: Schriftgröße des root-Elements (normalerweise das <html>-Element)

Die CSS unit rem funktioniert ähnlich wie die CSS unit em. Nur reagiert sie nicht auf die Schriftgröße vom Eltern-Element, sondern auf die Schriftgröße vom root-Element (meist das <html>-Element).

Du kannst also z.B. 1x für das html-Tag die Schriftgröße einstellen und dann alle anderen Schriften auf dieser Schriftgröße im Verhältnis basieren lassen.

Änderst du die eine Schriftgröße, ändern sich alle anderen mit.

Kann manchmal nützlich sein.

2. Welche CSS units sollte ich wann verwenden?

Die Antwort ist ein Stück weit auch Geschmacksfrage bzw. hängt von deinem Arbeitsstil ab.

Wir bei den relativen Meistern verwenden in den meisten Fällen hauptsächlich diese hier:

  • vw und vh, wenn etwas auf der Fenstergröße basieren soll (z.B. wenn ein Element die ganze Breite ausfüllen soll)
  • px, wenn etwas eine genau bestimmte Größe braucht
  • %, wenn etwas aufs Eltern-Element reagieren soll
  • keine Einheit dort wo man keine braucht (z.B. opacity oder z-index)

Damit kommst du in 99% der Fälle ganz gut aus.

Diskussion zum Tutorial

Du bist aus Oberösterreich? Dann nütze doch auch unsere flexiblen Programmier-Kurse in Kirchdorf - oder gib deine Website gerne in die guten Hände unserer erfahrenen Wichtel-Webdesign-Agentur.