Maßeinheiten im Web Design

Für die Gestaltung mit CSS existieren diverse EInheiten. Grundlegend lassen diese sich in die "alten" und "neuen" einteilen. Die "alten" sind mit älteren Browsern kompatibel. Die neuen Einheiten werden von alten Browsern nicht verarbeitet. Aus Gründen der Kompatibilität, insbesondere zu älteren Telefonen, deren Browser kein Update erhält, sollte derzeit noch auf die alten Einheiten zurückgegriffen werden.

Klassische Maßeinheiten: Absolute Einheiten

px

Pixel (px) sind der Klassiker unter den Einheiten. Sie beziehen sich auf die Pixel des Displays. Das Problem hier: Ein Monitor kann die gleiche Auflösung und damit Pixelanzahl haben, wie ein Smartphone. Das Smartphone ist aber kleiner und hat damit kleinere Pixel. Mit px skalierte Elemente erscheinen daher auf dem Smartphone ggf. zu klein oder auf dem Monitor zu groß.

pt

pt ist die Angabe einer Schriftgröße in Punkt. Der Punkt war im Print die Größe des Punkts. Heute ist es als 1/72 eines Zolls definiert.

pc

Pica ist ebensfalls eine Angabe aus dem Print. Ein Pica entspricht 12pt und bezieht sich damit auch auf die Zoll-Angabe.

Klassische Maßeinheiten: Relative Einheiten

em

em ist eine relative Angabe der Größe, bezogen auf die Schriftgröße des Elternelements. Vorsicht: Wird diese vorher nicht definiert, bezieht sie sich ggf. auf das Browser-Stylesheet!

%

Prozent beziehen sich auf die Größe des Elternelements.

Neue Maßeinheiten: Relative Einheiten

vw

vw ist 1 Prozent der Breite des Viewports und skaliert entsprechend mit dem Viewport.

vh

vw ist 1 Prozent der Breite des Viewports und skaliert entsprechend mit dem Viewport.

rem

rem ist root-em und beziehen sich realtiv wie die em, allerdings nicht auf das umgebende Element, sondern auf das Wurzel-Element des Dokuments (html-Tag).

Über die genannten Einheiten hinaus existieren noch weitere Einheiten, die aber in der Praxis nur für Sonderfälle Bedeutung haben.

Last updated:14.12.2017