Einheiten

In CSS gibt es verschiedene Möglichkeiten, die Größe von Elementen oder Texten festzulegen. Manche Größen bleiben immer gleich, andere passen sich automatisch an ihre Umgebung an. Es ist wichtig, die Unterschiede zu verstehen, um Webseiten flexibel und gut gestaltet aufzubauen.

Pixel (px)

Pixel sind feste Größen, die immer gleich groß auf dem Bildschirm angezeigt werden, unabhängig vom Gerät.

16px

Microsoft ist nicht Böse, sie machen einfach ein wirklich miserables Betriebssystem.

Prozent (%):

Prozentwerte sind relativ zur Größe des übergeordneten Elements. Ändert sich dieses, passt sich auch das Element automatisch an.

50%

Em

Diese Einheit orientiert sich an der Schriftgröße des aktuellen Elements. Verändert sich die Schriftgröße, ändern sich alle Werte in Em entsprechend mit.

1em

1em

Schriftgröße h1

Schriftgröße p

Rem

Rem funktioniert ähnlich wie Em, bezieht sich jedoch auf die Schriftgröße des Wurzelelements der Seite. So bleibt die Skalierung über die gesamte Seite einheitlich.

1rem

Schriftgröße h1

Schriftgröße p

Viewport-Höhe (vh) und Viewport-Breite (vw)

Mit vh und vw legt man Größen fest, die sich direkt an der sichtbaren Fläche des Browserfensters orientieren. Diese sichtbare Fläche nennt man Viewport. Verändert man das Fenster oder nutzt ein anderes Gerät, passen sich diese Werte automatisch an.

1vh entspricht 1 % der sichtbaren Höhe des Browserfensters. Hat der Viewport eine Höhe von 900px, sind 10vh = 90px.

1vw entspricht 1 % der sichtbaren Breite. Bei 1200px Breite entsprechen 50vw = 600px.

Viewport-Einheiten nutzt man häufig, um Abschnitte zu gestalten, die immer einen bestimmten Anteil des Bildschirms einnehmen sollen – etwa eine Startseite, die stets die volle Bildschirmhöhe füllt, egal ob auf dem Smartphone oder am Desktop.