CSS Maße und Einheiten
Jede CSS-Eigenschaft (Englisch: Property) hat einen bestimmten Wertetyp, durch den die zulässigen Werte für diese Eigenschaft definiert werden. Vielen CSS-Eigenschaften muss man eine Länge zuweisen. Zu diesen CSS Properties gehören zum Beispiel:
In CSS werden unterschiedliche Maßeinheiten verwendet, um eine Länge oder einen Abstand zu definieren.
Bei den Einheiten muss man prinzipiell zwei Gruppen unterscheiden: absolute Einheiten und relative Einheiten. Bedeutet das, dass für die einzelnen CSS-Eigenschaften eine bestimmte Einheit verwendet werden muss? Nein! Eigenschaften haben nichts mit Einheiten zu tun. Wenn für eine Eigenschaft ein Wert in px zulässig ist, dann ist auch jede andere Maßeinheit zur Angabe der Länge erlaubt.
Relative Einheiten
em (von Englisch: equal to M)
em orientiert sich grob an den Abmessungen des großen M einer Schriftart.rem (Root-em)
rem entspricht em, bezogen auf das Wurzel-Element der Webseite. Das ist das Element html.ex (von Englisch: equal to x)
ex orientiert sich an der x-Höhe einer Schriftart, d.h. an der Höhe des kleinen x.ch (von Englisch: character width)
ch orientiert sich an der Breite des Zeichens 0 (Null).vw (Viewport Width)
vw ist ein Prozentwert (0 … 100) relativ zur Breite des Browser-Viewports.vh (Viewport Height)
vh ist ein Prozentwert (0 … 100) relativ zur Höhe des Browser-Viewports
Absolute Einheiten
px (Pixel)
Das px ist die kleinste Ausgabe-Einheit eines Displays, px ist relativ von Gerät zu Gerät, aber eine absolute Einheit bezogen auf ein bestimmtes Gerät.pt pt (Point)
pt steht für Point (Deutsch: Punkt) und wird vor allem für Drucker verwendet. 1pt = 1/72 Inch bzw.1,33pxpc (Pica)
pc steht für Pica und wird hauptsächlich für den Druck verwendet. 1pc entspricht 12pt bzw. 1/6 Inch.cm (Zentimeter)
cm steht für Zentimeter, 1cm = 37,8pxmm (Millimeter)
mm steht für Millimeter, 1mm = 3,78pxin (Inch bzw. Zoll)
Ein Zoll (bzw. 1″) entspricht 2,54cm. Zoll und Inch sind identisch.
Relative Einheiten
em (equal to M)
Die Einheit em ist eine relative Längeneinheit, die vor allem für die Gestaltung von Webseiten wichtig ist. Das em wird nicht durch die Breite des Großbuchstabens M definiert, sondern durch die aktuelle Schriftgröße der Schriftart in Pixel.
Ein em entspricht standardmäßig 16 Pixel und ist etwa die Breite des Buchstabens M. Das gilt aber nur, wenn der Benutzer die Standard-Einstellung seines Browsers nicht geändert hat. Wenn der Benutzer die Schriftgröße in den Browser-Einstellungen angepasst hat, dann ist die dort festgelegte Schriftgröße 1em.
1em entspricht 100%
Wird die Schriftgröße font-size des Elements selbst in em definiert, so bezieht sich die Einheit em auf die Schriftgröße des Eltern-Elements. Werte kleiner als 1em führen zu einer Verkleinerung und Werte größer als 1em zu einer Vergrößerung der Schrift.
Für Längen, die in em definiert werden, wird die berechnete Schriftgröße des Elements verwendet, für das die Eigenschaft deklariert wird.
Ich rate dringend davon ab, die Schriftgröße für HTML oder BODY in px anzugeben. Denn dies würde die Standardeinstellung des Benutzers außer Kraft setzen und wäre schädlich für die Barrierefreiheit.
rem (Root-em)
Die Einheit rem verhält sich wie em. Es geht aber nicht von der Schriftgröße des übergeordneten Eltern-Elements aus, sondern von der Schriftgröße des Root-Elements. Das Root-Element ist in der Regel das Element HTML.
Man kann dadurch die Schriftgrößen der kompletten Website von dieser einen Schriftgröße abhängig machen. Wenn die Schriftgröße des HTML-Elements geändert wird, werden alle anderen Schriftgrößen automatisch geändert.
Wie em entspricht auch rem standardmäßig 16 Pixel, es sei denn der Benutzer hat in den Browser-Einstellungen die Standard-Schriftgröße geändert.
Die Maßeinheit rem wird in der Regel nur sehr selten eingesetzt.
ex (equal to x)
Das ex ist eine relative Längeneinheit, die auf der Höhe des Kleinbuchstabens x basiert. Ein ex entspricht dem Abstand zwischen der Grundlinie und der Mittellinie einer konkreten Schriftart.
Für reale Web-Projekte wird diese Maßeinheit fast nie verwendet.
vw (Viewport Width)
Die Einheit vw ist eine spezielle Längeneinheit, die sich auf die Viewport-Breite bezieht und unabhängig von der Breite des Elements ist.
Mit der Einheit vw kann die Schriftgröße an die Viewport-Breite (d.h. Breite des Browserfensters) angepasst werden. Je breiter das Browserfenster ist, desto größer wird die Schrift.
1vw entspricht 1% der Viewport-Breite
vh (Viewport Height)
Die Einheit vh ist eine spezielle Längeneinheit, die sich auf die Viewport-Höhe bezieht und unabhängig von der Höhe des Elements ist.
Mit der Einheit vh kann die Schriftgröße an die Viewport-Höhe (d.h. Höhe des Browserfensters) angepasst werden. Je breiter das Browserfenster ist, desto größer wird die Schrift.
1vh entspricht 1% der Viewport-Höhe
Absolute Einheiten
px (Pixel)
Die Basiseinheit für alle Längenmaße ist das CSS-Pixel px, es wurde definiert um klein, aber noch sichtbar zu sein. Ein Pixel ist per Definition ein gerader noch sichtbarer Bildpunkt, der eine Armlänge vom Betrachter entfernt ist.
Ein Pixel ist relativ zur Bildschirmauflösung. Auf einen konkreten Monitor bezogen ist die Angabe ein absolutes Maß. Wird Bildschirmauflösung eines Monitors geändert, dann ändert sich auch die Pixelgröße
Pixel sind unabhängig von der CSS-Kaskade. Für ein flexibles Layout für verschiedene Geräte ist em besser geeignet. Daher sollte man die Einheit px vor allem im Responsive Web-Design vermeiden.
pt (Point)
pt steht für Point (Deutsch: Punkt) und ist außerhalb von CSS vor allem beim Druck sehr geläufig. Deshalb wurde auch diese Einheit übernommen. Für den optimalen Druck wird häufig eine separate Datei "print.css" verwendet. In dieser Stylesheet-Datei ist die Einheit pt besser geeignet als die Einheit px.
Als Standard-Schriftgröße fürs Drucken sind in der Regel 12pt empfehlenswert.
Für die optimale Darstellung der Webseite auf dem Computer-Monitor oder Smartphone-Display ist die Enheit pt nicht sinnvoll.