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 einen50%-Sepiafilter auf das Element an. - Beim Festlegen der Deckkraft wird mit
opacity: 0.5die Deckkraft50%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.
| Einheit | Name | Gleichbedeutend mit |
|---|---|---|
| cm | Zentimeter | 1 cm = 96 Pixel/2,54 |
| mm | Millimeter | 1 mm = 1/10s von 1 cm |
| F | Viertelmillimeter | 1Q = 1/40s von 1 cm |
| in | Zoll | 1 Zoll = 2,54 cm = 96 Pixel |
| PC | Pikas | 1 Stück = 1/6 von 1 Zoll |
| Pkt. | Punkte | 1 pt = 1/72s von 1 Zoll |
| Pixel | Pixel | 1 Pixel = 1/96s von 1 Zoll |
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).
| Einheit | relativ zu: |
|---|---|
| em | Relativ zur Schriftgröße Das heißt, 1,5 em ist 50% größer als die berechnete Basisschriftgröße des übergeordneten Elements. (Früher die Höhe des Großbuchstabens „M“). |
| Beispiel: | Heuristik, um zu bestimmen, ob die x-Höhe, ein Buchstabe „x“ oder „.5em“ in der aktuell berechneten Schriftgröße des Elements. |
| Cap | Höhe der Großbuchstaben in der aktuell berechneten Schriftgröße des Elements. |
| K | Durchschnittliche Wiedergabe von Figuren einer schmalen Glyphe in der Schriftart des Elements (dargestellt durch das Symbol „0“). |
| Durchschnitt Charaktervorstellungen Glyphe in voller Breite in der Schriftart des Elements dargestellt durch „水“ (CJK-Wasser-Ideogramm, U+6C34) Glyphe. | |
| Rem | Schriftgröße des Stammelements (Standardwert: 16 px). |
| LH | Zeilenhöhe des Elements. |
| rlh | Zeilenhöhe des Stammelements. |
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.
| Einheit | relativ zu |
|---|---|
| VW | 1% der Breite des Darstellungsbereichs. Nutzer verwenden dieses Modul für coole Schriftarten, z. B. die Schriftgröße der Kopfzeile an die Breite der Seite anpassen, ändert sich auch die Größe der Schriftart. |
| Vh | 1% der Höhe des Darstellungsbereichs Damit können Sie Elemente auf einer Benutzeroberfläche anordnen, wenn Sie beispielsweise eine Fußzeilen-Symbolleiste haben. |
| vi | 1% der Größe des Darstellungsbereichs in der Inline-Achse des Stammelements. „Achse“ bezieht sich auf Schreibmodi. In horizontalen Schreibmodi wie Englisch ist die Inline-Achse horizontal. In vertikalen Schreibmodi wie einigen japanischen Schriftbildern verläuft die Inline-Achse von oben nach unten. |
| VB | 1% der Größe des Darstellungsbereichs in der Blockachse des Stammelements Für die Blockachse wäre dies die Richtung der Sprache. LTR-Sprachen wie Englisch hätten eine vertikale Blockachse. da englischsprachige Leser die Seite von oben nach unten analysieren. Ein vertikaler Schreibmodus hat eine horizontale Blockachse. |
| VMin | 1% der kleineren Dimension des Darstellungsbereichs beträgt. |
| vMax | 1% der größeren Abmessung 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
Welche der folgenden Dimensionen sind gültig?
Wie unterscheiden sich absolute und relative Einheiten?
Die Einheiten für den Darstellungsbereich sind absolut.