Größeneinheiten

The CSS Podcast – 008: Sizing Units

Das Web ist ein responsives Medium. Manchmal möchten Sie jedoch die Abmessungen anpassen, 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 in der berechneten Größe der Breite eines „0“-Zeichens in der gerenderten Schriftart entspricht. Mit dieser Einheit können Sie die Breite des Texts mit einer Einheit beschränken, die für die Textgröße vorgesehen ist. Dies ermöglicht eine vorhersehbare Steuerung unabhängig von der Textgröße. Die ch-Einheit ist eine von wenigen Einheiten, die für bestimmte Kontexte wie dieses Beispiel hilfreich sind.

Numbers

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

Die Bedeutung von Zahlen hängt von ihrem Kontext ab. Wenn Sie beispielsweise line-height definieren, ist eine Zahl repräsentativ für ein Verhältnis, wenn Sie es ohne eine 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 p-Elements. Wenn also 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 wendet filter: sepia(0.5) den Sepiafilter 50% auf das Element an.
• Beim Festlegen der Deckkraft wird mit opacity: 0.5 eine Deckkraft von 50% angewendet.
• In Farbkanälen: rgb(50, 50, 50), wobei die Werte 0 bis 255 zum Festlegen eines Farbwerts akzeptabel sind. Sieh dir die Lektion zu Farben an.
• So wandeln Sie ein Element um: transform: scale(1.2) skaliert das Element um 120% seiner Anfangsgröße.

Prozentsätze

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

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

div p {
  width: 50%; 
}

Im obigen Beispiel beträgt die Breite von div p 150px, vorausgesetzt, das Layout verwendet die Standardeinstellung box-sizing: content-box.

Wenn Sie margin oder padding als Prozentsatz festlegen, sind sie unabhängig von der Richtung ein Teil der Breite des übergeordneten Elements.

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

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

Im Snippet oben werden sowohl margin-top als auch 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 der Transformation. In diesem Beispiel hat p einen translateX-Wert von 10% und width von 50%. Berechnen Sie zuerst die Breite: 150px, weil sie 50% der Breite des übergeordneten Elements beträgt. Nimm dann 10% von 150px, also 15px.

Abmessungen und Längen

Wenn Sie eine Einheit mit einer Zahl verknüpfen, wird sie zu einer Dimension. Beispielsweise ist 1rem eine Dimension. In diesem Zusammenhang wird die Einheit, die an eine Zahl angehängt ist, in den Spezifikationen als Dimensionstoken bezeichnet. Längen sind Abmessungen, die sich auf die Entfernung beziehen, und können entweder absolut oder relativ sein.

Absolute Längen

Alle absoluten Längen werden zur selben Basis aufgelöst, sodass sie überall in Ihrem CSS-Code vorhersehbar sind. Wenn Sie beispielsweise cm verwenden, um die Größe Ihres Elements zu ändern und dann zu drucken, sollte die Größe des Elements genau sein, wenn Sie es mit einem Lineal vergleichen.

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

Wenn du diese Seite druckst, würde div als schwarzes Rechteck von 10 x 5 cm gedruckt werden. CSS wird nicht nur für digitale Inhalte verwendet, sondern auch zum Gestalten von Druckinhalten. Absolute Längen können bei der Designentwicklung für den Druck sehr praktisch sein.

Relative Länge

Die relative Länge wird anhand eines Basiswerts berechnet, ähnlich wie ein Prozentsatz. Der Unterschied zwischen diesen und Prozentsätzen besteht darin, dass Sie die Größe der Elemente kontextbezogen anpassen können. Das bedeutet, dass CSS-Einheiten wie ch die Textgröße als Basis verwenden, und vw, die auf der Breite des Darstellungsbereichs (Ihres Browserfensters) basieren. Relative Längen sind im Web aufgrund ihrer Reaktionsfähigkeit besonders nützlich.

Relative Schriftgröße

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

Einheiten im Verhältnis zum Darstellungsbereich

Sie können die Abmessungen des Darstellungsbereichs (Browserfensters) als relative Basis verwenden. Diese Einheiten machen den verfügbaren Darstellungsbereich aus.

div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

In diesem Beispiel entspricht div 10% der Breite des Darstellungsbereichs, da 1vw 1% der Breite des Darstellungsbereichs ausmacht. Das p-Element hat für max-width den Wert 60ch. Das bedeutet, dass es in der berechneten Schriftart und -größe die 60 „0“-Zeichen nicht überschreiten darf.

Verschiedene Einheiten

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

Winkeleinheiten

Im Farbmodul haben wir uns Winkeleinheiten angesehen, die zum Definieren von Gradwerten wie dem Farbton in hsl hilfreich sind. Sie sind auch zum Drehen von Elementen innerhalb von Transformationsfunktionen nützlich.

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

Mit der Winkeleinheit deg können Sie ein div um 90° um seine 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 beträgt der Wert von min-resolution 192dpi. Die Einheit dpi steht für Punkte pro Zoll. Ein nützlicher Kontext hierfür ist das Erkennen von Bildschirmen mit sehr hoher Auflösung, wie Retina-Displays in einer Medienabfrage und das Bereitstellen eines Bilds mit höherer Auflösung.

Überprüfen Sie Ihr Wissen

Testen Sie Ihr Wissen über die Größenanpassung

Ressourcen

• CSS-Spezifikationswerte und -Einheiten – Stufe 4
• Größen und Einheiten auf MDN
• Alles über Ems
• Eine Erklärung von Prozentsätzen