Größeneinheiten

The CSS Podcast – 008: Sizing Units

Das Web ist ein responsives Medium, Manchmal möchten Sie jedoch die Dimensionen kontrollieren, um die Gesamtqualität der Benutzeroberfläche zu verbessern. Ein gutes Beispiel dafür ist die Begrenzung der Zeilenlänge, um die Lesbarkeit zu verbessern. Wie würden Sie dies in einem flexiblen Medium wie dem Web tun?

In diesem Fall können Sie eine ch-Einheit verwenden, die der Breite einer „0“ entspricht -Zeichen in der gerenderten Schriftart in der berechneten Größe. Mit diesem Anzeigenblock können Sie die Breite des Textes mit einem Anzeigenblock was wiederum ermöglicht vorhersehbare Kontrolle unabhängig von der Textgröße. Die Einheit ch ist nur 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 für Farbkanalwerte in rgb zu definieren. Zahlen sind ganze Zahlen (1, 2, 3, 100) und Dezimalzahlen (.1, .2, 0,3).

Zahlen haben je nach Kontext eine Bedeutung. Wenn Sie beispielsweise line-height definieren, Eine Zahl ist repräsentativ 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 Pixelschriftgröße des p-Elements. Wenn also p als font-size 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 wird mit opacity: 0.5 die Deckkraft 50% angewendet.
• In Farbkanälen: rgb(50, 50, 50), wobei die Werte 0 bis 255 zum Festlegen eines Farbwerts akzeptabel sind. Weitere Informationen
• So transformieren Sie ein Element: transform: scale(1.2) skaliert das Element um 120% seiner ursprünglichen Größ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, Sie sind Teil der Breite des übergeordneten Elements, unabhängig von der Richtung.

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 für translateX den Wert 10% und für width 50%. Berechnen Sie zuerst die Breite: 150px, da sie 50% der Breite des übergeordneten Elements entspricht. Nimm dann 10% von 150px, was 15px entspricht.

Abmessungen und Längen

Wenn Sie eine Einheit mit einer Zahl verknüpfen, wird daraus eine Dimension. 1rem ist beispielsweise eine Dimension. In diesem Kontext wird die mit einer Zahl verknüpfte Einheit in Spezifikationen als Dimensionstoken bezeichnet. Längen sind Dimensionen, die sich auf die Entfernung beziehen und können entweder absolut oder relativ sein.

Absolute Längen

Alle absoluten Längen werden zur gleichen Basis aufgelöst. damit sie überall dort, wo sie in Ihrem CSS verwendet werden, vorhersehbar sind. Wenn Sie beispielsweise die Größe Ihres Elements mit cm festlegen und dann drucken, wenn Sie sie mit einem Lineal vergleichen.

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

Wenn du diese Seite ausgedruckt hast, wird div als schwarzes Rechteck mit der Größe 10 x 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 Print sehr nützlich sein.

Relative Länge

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 anpassen können. Das bedeutet, dass CSS-Einheiten wie ch auf der Grundlage der Textgröße verfügen. und vw, die auf der Breite des Darstellungsbereichs (d. h. Ihrem Browserfenster) basiert. Relative Längen sind im Web besonders nützlich, da sie responsiv sind.

Schriftgrößenbezogene Einheiten

CSS bietet hilfreiche Einheiten in Relation zur Größe der Elemente der gerenderten Typografie, etwa die Größe des Textes selbst (em Einheiten) oder die Breite der Schriftzeichen (ch Einheiten).

Darstellungsbereichsrelative Einheiten

Sie können die Abmessungen des Darstellungsbereichs (Browser-Fensters) als relative Grundlage verwenden. Diese Einheiten aufteilen die verfügbare Fläche 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 den max-width-Wert 60ch Das heißt, sie darf die Breite von 60 „0“ nicht überschreiten. Zeichen in der berechneten Schriftart und -größe an.

Verschiedene Einheiten

Es wurden einige andere Einheiten für bestimmte Typen von Werten angegeben.

Winkeleinheiten

Im Farbmodul: haben wir uns Winkeleinheiten angesehen, die hilfreich sind, um Gradwerte, wie zum Beispiel 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“ kannst du 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 ist der Wert von min-resolution 192dpi. Die Einheit dpi steht für Dots per inch (Punkte pro Zoll). Ein nützlicher Kontext dafür ist das Erkennen von Bildschirmen mit sehr hoher Auflösung, wie Retina-Displays in Medienabfragen sind und ein Bild mit höherer Auflösung liefert.

Wissen testen

Testen Sie Ihr Wissen über Größenanpassung

Ressourcen

• Werte und Einheiten für Preisvergleichsportale – Stufe 4
• Größe und Einheiten auf MDN
• Alles über Ems
• Erklärung zu Prozentsätzen