Größeneinheiten

Das Web ist ein responsives Medium, aber manchmal möchten Sie die Abmessungen steuern, um die Gesamtqualität der Benutzeroberfläche zu verbessern. Ein gutes Beispiel hierfür ist die Begrenzung der Zeilenlänge, um die Lesbarkeit zu verbessern. Wie würden Sie das in einem flexiblen Medium wie dem Web tun?

In diesem Fall können Sie eine ch-Einheit verwenden, die der Breite eines „0“-Zeichens in der gerenderten Schrift bei der berechneten Größe entspricht. Mit dieser Einheit können Sie die Textbreite mit einer Einheit begrenzen, die auf die Textgröße ausgerichtet ist. Dadurch erhalten Sie eine vorhersehbare Steuerung, unabhängig von der Textgröße. Die Einheit ch ist eine von wenigen Einheiten, die für bestimmte Kontexte wie dieses Beispiel hilfreich sind.

iWork Numbers

Zahlen werden verwendet, um opacity, line-height und sogar die Farbkanalwerte in rgb zu definieren. Zahlen sind ohne Einheit angegebene Ganzzahlen (1, 2, 3, 100) und Dezimalzahlen (0,1, 0,2, 0,3).

Zahlen haben je nach Kontext eine bestimmte Bedeutung. Wenn Sie beispielsweise line-height definieren, steht eine Zahl für ein Verhältnis, wenn Sie sie ohne unterstützende Einheit definieren:

p {
  font-size: 24px;
  line-height: 1.5;
}

In diesem Beispiel entspricht 1.5 150 % der berechneten Schriftgröße in Pixeln des Elements p. Wenn also die p einen font-size von 24px hat, wird die Zeilenhöhe als 36px berechnet.

Zahlen können auch an folgenden Stellen verwendet werden:

  • Beim Festlegen von Werten für Filter: filter: sepia(0.5) wendet einen 50%-Sepiafilter auf das Element an.
  • Beim Festlegen der Deckkraft: opacity: 0.5 wendet eine 50%-Deckkraft an.
  • In Farbkanälen: rgb(50, 50, 50), wobei für die Werte 0 bis 255 ein Farbwert akzeptabel ist. Farblehre ansehen
  • So transformierst du ein Element: transform: scale(1.2) skaliert das Element auf 120 % seiner ursprünglichen Größe.

Prozentsätze

Wenn Sie einen Prozentsatz in CSS verwenden, müssen Sie wissen, wie der Prozentsatz berechnet wird. width wird beispielsweise als Prozentsatz der verfügbaren Breite im übergeordneten Element berechnet.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; 
}

Im obigen Beispiel ist die Breite von div p 150px, vorausgesetzt, dass im Layout die Standardeinstellung box-sizing: content-box verwendet wird.

Wenn Sie margin oder padding als Prozentsatz festlegen, entspricht der Wert unabhängig von der Richtung einem Teil der Breite des übergeordneten Elements.

div {
  width: 300px;
  height: 100px;
}

div p {
  margin-top: 50%; /* calculated: 150px */
  padding-left: 50%; /* calculated: 150px */
}

Im obigen Snippet werden margin-top und padding-left als 150px berechnet.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; /* calculated: 150px */
  transform: translateX(10%); /* calculated: 15px */
}

Wenn Sie einen transform-Wert als Prozentsatz festlegen, basiert er auf dem Element mit dem Transformationssatz. In diesem Beispiel hat p den translateX-Wert 10% und den width-Wert 50%. Berechnen Sie zuerst die Breite: 150px, da sie 50% der Breite des übergeordneten Elements entspricht. Dann nehmen Sie 10% von 150px, was 15px ergibt.

Abmessungen und Längen

Wenn Sie einer Zahl eine Maßeinheit zuweisen, wird sie zu einer Dimension. 1rem ist beispielsweise eine Dimension. In diesem Zusammenhang wird die Einheit, die mit einer Zahl verknüpft ist, in Spezifikationen als Dimensionstoken bezeichnet. Längen sind Dimensionen, die sich auf Entfernungen beziehen. Sie können entweder absolut oder relativ sein.

Absolute Längen

Alle absoluten Längen werden anhand derselben Basis aufgelöst, sodass sie überall in Ihrem CSS vorhersehbar sind. Wenn Sie beispielsweise cm verwenden, um die Größe Ihres Elements festzulegen und dann zu drucken, sollte es beim Vergleich mit einem Lineal korrekt sein.

div {
  width: 10cm;
  height: 5cm;
  background: black;
}

Wenn Sie diese Seite ausdrucken, wird das div als schwarzes Rechteck mit einer Größe von 10 × 5 cm gedruckt. CSS wird nicht nur für digitale Inhalte verwendet, sondern auch für die Gestaltung gedruckter Inhalte. Absolute Längen können beim Design für den Druck sehr nützlich sein.

Einheit Name Gleichbedeutend mit
cm Zentimeter 1 cm = 96 px/2,54
mm Millimeter 1 mm = 1/10 cm
F Viertelmillimeter 1 Q = 1/40 von 1 cm
in Zoll 1 Zoll = 2,54 cm = 96 Pixel
pc Picas 1 pc = 1/6 Zoll
pt Punkte 1 Punkt = 1/72 Zoll
px Pixel 1 px = 1/96 Zoll

Relative Längen

Die relative Länge wird gegenüber einem Basiswert berechnet, ähnlich wie ein Prozentsatz. Der Unterschied zwischen diesen und Prozentsätzen besteht darin, dass Sie die Größe der Elemente kontextbezogen bestimmen können. Das bedeutet, dass CSS-Einheiten wie ch haben, die die Textgröße als Grundlage verwenden, und vw, die auf der Breite des Darstellungsbereichs (d. h. Ihrem Browserfenster) basiert. Relative Längen sind aufgrund ihrer Responsiven-Natur besonders im Web nützlich.

Schriftgrößenbezogene Einheiten

CSS bietet hilfreiche Einheiten, die sich auf die Größe der Elemente der gerenderten Typografie beziehen, z. B. die Größe des Texts selbst (em-Einheiten) oder die Breite der Schriftzeichen (ch-Einheiten).

Einheit relativ zu:
em Im Verhältnis zur Schriftgröße ist 1,5 em 50% größer als die berechnete Basisschriftgröße des übergeordneten Elements. (Bisher war das die Höhe des Großbuchstabens „M“).
Beispiel: Heuristik, um zu bestimmen, ob die X-Höhe, der Buchstabe „x“ oder „.5em“ in der aktuell berechneten Schriftgröße des Elements verwendet werden soll.
Cap Höhe der Großbuchstaben in der aktuell berechneten Schriftgröße des Elements.
ch Durchschnittliche Zeichenvorlage eines schmalen Schriftzeichens in der Schriftart des Elements (dargestellt durch das Schriftzeichen „0“).
ic Der durchschnittliche Zeichenabstand eines Zeichens mit voller Breite in der Schrift des Elements, dargestellt durch das Zeichen „水“ (CJK-Wasserideogramm, U+6C34).
rem Schriftgröße des Stammelements (Standard ist 16 px).
LH Zeilenhöhe des Elements.
rlh Zeilenhöhe des Stammelements.
Der Text, CSS ist 10-mal besser mit Labels für Aufstrichhöhe, Abstrichhöhe und X-Höhe. Die X-Höhe steht für 1 ex und die 0 für 1 ch.

Vom Darstellungsbereich abhängige Einheiten

Sie können die Abmessungen des Darstellungsbereichs (Browserfensters) als relativen Bezugspunkt verwenden. Diese Elemente teilen den verfügbaren Viewport-Bereich auf.

Einheit relativ zu
vw 1 % der Breite des Darstellungsbereichs. Mit dieser Einheit lassen sich coole Schrifttricks ausführen, z. B. die Größe einer Kopfzeilenschrift basierend auf der Breite der Seite ändern, sodass sich die Schriftgröße mit der Größe der Seite ändert.
vh 1 % der Höhe des Darstellungsbereichs. So können Sie beispielsweise Elemente in einer Benutzeroberfläche anordnen, wenn Sie eine Fußzeilenleiste haben.
vi 1 % der Größe des Darstellungsbereichs in der Inline-Achse des Stammelements. „Achse“ bezieht sich auf Schreibmodi. Bei horizontalen Schreibweisen wie Englisch ist die Inline-Achse horizontal. Bei vertikalen Schriftschnitten wie einigen japanischen Schriftarten verläuft die Inline-Achse von oben nach unten.
vb 1 % der Größe des Darstellungsbereichs in der Blockachse des Stammelements. Bei der Blockachse ist dies die Leserichtung der Sprache. Bei Sprachen, die von links nach rechts geschrieben werden, wie Englisch, gibt es eine vertikale Blockachse, da Leser in englischer Sprache die Seite von oben nach unten lesen. Ein vertikaler Schreibmodus hat eine horizontale Blockachse.
vmin 1 % der kleineren Dimension des Darstellungsbereichs.
vmax 1 % der größeren Dimension des Darstellungsbereichs.
div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

In diesem Beispiel beträgt div 10% der Breite des Darstellungsbereichs, da 1vw 1% der Breite des Darstellungsbereichs entspricht. Das p-Element hat als max-width den Wert 60ch. Das bedeutet, dass die Breite von 60 „0“-Zeichen in der berechneten Schriftart und ‐größe nicht überschritten werden darf.

Sonstige Einheiten

Es gibt noch einige andere Einheiten, die für bestimmte Arten von Werten festgelegt wurden.

Winkeleinheiten

Im Farbmodul haben wir uns Winkeleinheiten angeschaut, die für die Definition von Gradwerten hilfreich sind, z. B. den Farbton in hsl. Sie sind auch nützlich, um Elemente innerhalb von Transformationsfunktionen zu drehen.

div {
  width: 150px;
  height: 150px;
  transform: rotate(60deg);
}

Mit der Winkeleinheit deg können Sie eine div um 90° um ihre Mittelachse drehen.

div {
  background-image: url('a-low-resolution-image.jpg');
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  div {
    background-image: url('a-high-resolution-image.jpg');
  }
}

Auflösungseinheiten

Im vorherigen Beispiel ist der Wert von min-resolution 192dpi. Die Einheit dpi steht für Punkte pro Zoll. Ein nützlicher Kontext dafür ist das Erkennen von Bildschirmen mit sehr hoher Auflösung, wie Retina-Displays in einer Medienabfrage, und die Bereitstellung eines Bildes mit höherer Auflösung.

Wissenstest

Testen Sie Ihr Wissen über Sizing

Welche der folgenden Dimensionen sind gültig?

ui
ux
ch
px
in
cm
ix
em
8.

Wie unterscheiden sich absolute und relative Einheiten?

Absolute Werte können nicht geändert werden, relative Einheiten hingegen schon.
Eine absolute Länge wird anhand eines einzelnen gemeinsamen Basiswerts berechnet, während eine relative Einheit mit einem Basiswert verglichen wird, der sich ändern kann.

Viewport-Einheiten sind absolut.

Falsch
Richtig

Ressourcen