CSS-Einheiten

CSS-Einheiten

CSS hat verschiedene Einheiten zur Angabe von Längen.

Viele CSS-Attribute akzeptieren "Längen"-Werte, wie z.B. width,margin,padding,font-size u.a.

Die Länge ist eine Zahl, die eine Längenединиke nach sich zieht, wie z.B. 10px,2em u.a.

Beispiel

Legen Sie verschiedene Längenwerte mit px (Pixel) fest:

h1 {
  font-size: 60px;
}
p {
  font-size: 25px;
  line-height: 50px;
}

Versuchen Sie es selbst

Zwischen der Zahl und der Einheit darf kein Leerzeichen sein. Allerdings kann die Einheit weggelassen werden, wenn der Wert 0 ist.

Für einige CSS-Attribute ist die Verwendung negativer Längen erlaubt.

Es gibt zwei Arten von Längenmaßen:Absolute EinheitenundRelative Einheiten.

Absolute Länge

Absolute Längenmaße sind fest und die Länge, die durch eine beliebige absolute Länge angegeben wird, wird genau in dieser Größe angezeigt.

Absolute Längenmaße sollten nicht auf dem Bildschirm verwendet werden, da die Bildschirmgröße stark variieren kann. Allerdings können sie verwendet werden, wenn das Ausgabemedium bekannt ist, z.B. für Drucklayout (print layout).

Einheit Beschreibung TIY
cm Zentimeter Versuchen Sie es!
mm Millimeter Versuchen Sie es!
in Zoll (1in = 96px = 2,54cm) Versuchen Sie es!
px * Pixel (1px = 1/96 von 1in) Versuchen Sie es!
pt Point (1pt = 1/72 von 1in) Versuchen Sie es!
pc Pica (1pc = 12 pt) Versuchen Sie es!

* Pixel (px) sind im Vergleich zum Anzeigegerät. Für Geräte mit niedriger dpi ist 1px ein Gerätspixel (Punkt) auf dem Bildschirm. Für Drucker und hochauflösende Bildschirme bedeutet 1px mehrere Gerätspixel.

Relative Länge

Relative Längenmaße definieren die Länge im Vergleich zu einer anderen Längenattribut. Relative Längenmaße skalieren zwischen verschiedenen Rendermedien besser.

Einheit Beschreibung TIY
em Die Schriftgröße des Elements im Vergleich zur aktuellen Schriftart (2em bedeutet die aktuelle Schriftgröße verdoppelt) Versuchen Sie es!
ex Die x-height der aktuellen Schriftart (wenig verwendet) Versuchen Sie es!
ch Die Breite im Vergleich zu "0" Versuchen Sie es!
rem Die Schriftgröße des Wurzelelements (font-size) Versuchen Sie es!
vw 1% der Breite des Ansichtsfensters Versuchen Sie es!
vh 1% der Höhe des Ansichtsfensters Versuchen Sie es!
vmin 1% im Vergleich zur kleineren Größe des Ansichtsfensters Versuchen Sie es!
vmax Relativ zur größeren Größe des Viewports * 1％ Versuchen Sie es!
% Relativ zum Elternelement Versuchen Sie es!

Tipp:Em und rem-Units können verwendet werden, um perfekte skalierbare Layouts zu erstellen!

* Viewport (Viewport) = Größe des Browserfensters. Wenn der Viewport 50 Zentimeter breit ist, dann 1vw = 0.5 Zentimeter.

Browserunterstützung

Die in der Tabelle angegebenen Zahlen zeigen die erste Browserversion, die die Längenmaßeinheit vollständig unterstützt.

Längenmaßeinheiten
em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5
ch 27.0 9.0 1.0 7.0 20.0
rem 4.0 9.0 3.6 4.1 11.6
vh, vw 20.0 9.0 19.0 6.0 20.0
vmin 20.0 12.0 19.0 6.0 20.0
vmax 26.0 16.0 19.0 7.0 20.0