Maßeinheiten

So wie es in der realen Welt Maßeinheiten gibt (z.B. CM), so gibt es im Web ebenfalls verschiedene Maßeinheiten. Die gängiste ist Pixel (PX). Aber es gibt auch einige andere, die je nach Bedarf nützlich sein können.

Dabei gibt es absolute Maßeinheiten (z.B. PX) oder relative Maßeinheiten (z.B. %). Relative Maßeinheiten sind z.B. ganz nützlich für Responsive, da sie je nach Bildschirmgröße unterschiedlich dargestellt werden.

Maßeinheit ändern

Klicke im Eingabefeld auf die Maßeinheit, klicke ggf. auf den Mehr-Pfeil und wähle danach einfach eine andere Einheit aus:

PX (Pixel)

Ein Pixel ist ein Bildpunkt auf dem Bildschirm. Es ist eine absolute, also feste Maßeinheit. Sie wird auf allen Bildschirmgrößen gleich dargestellt.

Wenn du z.B. eine Überschrift von 80px auf dem Desktop hast, ist diese auch 80px auf dem Smartphone. Wahrscheinlich wird sie hier aber zu groß sein. Das Arbeiten mit Pixel fällt zwar schön leicht, aber du musst dabei immer kleinere Bildschirmgrößen berücksichtigen. Deshalb musst du in diesem Fall die Überschrift unter Mobile z.B. auf 40px setzen:

Neben Schriften benutzt du Pixel häufig für Abstände. So haben z.B. Sektionen standardmäßig einen Innenabstand oben und unten von 140px:

% (Prozent)

Prozent ist eine relative, also flexible Maßeinheit. Sie wird auf allen Bildschirmgrößen unterschiedlich dargestellt. Dabei ist sie relativ zu ihrem “Elternelement”. Also dem Element in dem sie sich befindet.

Sektionen haben z.B. standardmäßig 8% Innenabstand links und rechts, damit der Container bei kleineren Bildschirmen nicht links und rechts am Rand klebt:

Texte haben standardmäßig eine Zeilenhöhe von 180% und Überschriften eine von 120%. Damit passt sich die Zeilenhöhe je nach Schriftgröße automatisch an:

Wenn du einen Button über die ganze Breite darstellen möchtest, setze die Breite einfach auf 100%:

AUTO (Automatisch)

Bei dieser Maßeinheit passen sich die Maße automatisch basierend auf dem Inhalt an. Eine Sektion ist z.B. genau so breit und so hoch, wie die Elemente, die sich darin befinden:

Du siehst, je mehr Elemente in der Sektion sind, desto höher wird sie:

Außerdem passen sich die Maße je nach Bildschirmgröße automatisch an:

VW & VH (Viewport Width & Height)

Viewport Width und Height sind relative, also flexible Maßeinheiten. Damit ist die sichtbare Browserbreite bzw. -höhe gemeint.

Zum Beispiel bedeuten 100vh genau 100% des Browserfensters bzw. das komplette Browserfenster. 50vh dementsprechend nur 50% des Browserfensters. Genau so verhält es sich auch mit VW für die Browserbreite.

Anders als Prozent bezieht sich die Maßeinheit nicht auf das Elternelement, sondern wirklich auf das Browserfenster.

Bei einer Header-Sektion kann es z.B. Sinn machen, eine Mindesthöhe von 100vh zu vergeben, damit die Sektion immer so hoch ist wie der komplette Browser:

EM (Emphemeral Unit)

EM ist eine weitere relative, also flexible Maßeinheit. Anders als alle anderen basiert diese auf der Schriftgröße. Ähnlich wie Prozent ist EM relativ zum Elternelement. Also dem Element in dem es sich befindet.

Standardmäßig haben Browser eine Schriftgröße von 16px (Chimpify dagegen 18px). Im Normalfall sieht die Umrechnung also so aus:

• 1em = 16px
• 2em = 32px
• 1.5em = 24px

Damit kannst du z.B. für Überschriften eine schöne Skalierung bauen:

• H1 = 5em = 80px
• H2 = 4em = 64px
• H3 = 3em = 48px
• H4 = 2em = 32px
• H5 = 1em = 16px
• H6 = 0.8em = 12.8px

So gehst du sicher, dass bei allen Bildschirmgrößen die H1-Überschrift z.B. 5 mal so groß ist wie die Standard-Schriftgröße.

Und wenn du die Schriftgröße von dem Elternelement (z.B. Container) änderst, ändert sich die Schriftgröße aller Überschriften:

Außerdem kannst du damit Abstände und Größen stylen. Du kannst z.B. einer Sektion einen Innenabstand von 4em geben. Dieser passt sich dann proportional zur Schriftgröße an:

REM (Root EM)

Das Problem bei EM ist, dass es sich immer auf das Elternelement bezieht. Also das Element in dem es sich befindet (z.B. ein Container). Das kann bei einer "tiefen Verschachtelung" schnell mal unübersichtlich werden. Deshalb gibt es REM.

REM basiert nicht auf einem Elternelement, sondern immer auf der Standard-Schriftgröße des Browsers deines Besuchers:

Du siehst, weder eine Änderung im Container, noch auf der Seiten-Ebene, hat Auswirkung, weil die Schriftgröße des Browsers als Basis dient.

S & MS (Sekunden & Millisekunden)

Sekunden und Millisekunden sind Maßeinheiten, die du für Animationen brauchst. Sie sagen an, wie lange verzögert werden soll, bis etwas erscheint: