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 Sepiafilter50%
auf das Element an. - Beim Festlegen der Deckkraft wird mit
opacity: 0.5
eine Deckkraft von50%
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.
Einheit | Name | Gleichbedeutend mit |
---|---|---|
cm | Zentimeter | 1 cm = 96 px/2,54 |
mm | Millimeter | 1 mm = 1/10 von 1 cm |
F | Viertelmillimeter | 1Q = 1/40s von 1 cm |
in | Zoll | 1 Zoll = 2,54 cm = 96 px |
pc | Picas | 1 in = 1/6 von 1 in |
Pkt. | Punkte | 1pt = 1/72. von 1in |
px | Pixel | 1 px = 1/96. von 1 in |
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).
Einheit | bezogen auf: |
---|---|
em | Relativ zur Schriftgröße, d. h., 1,5 em ist 50% größer als die berechnete Basisschriftgröße des übergeordneten Elements. (In der Vergangenheit die Höhe des Großbuchstabens „M“). |
Beispiel | Heuristik, um zu bestimmen, ob in der aktuell berechneten Schriftgröße des Elements die x-Höhe, der Buchstabe "x" oder "0,5em" verwendet werden soll. |
Obergrenze | Höhe der Großbuchstaben in der aktuell berechneten Schriftgröße des Elements. |
ch | Durchschnittlicher Zeichenfortschritt eines schmalen Symbols in der Schriftart des Elements (dargestellt durch das Symbol „0“). |
ic | Durchschnittlicher Zeichenfortschritt eines Symbols in voller Breite in der Schriftart des Elements, wie durch das Symbol „水“ (CJK Wasserideografie, U+6C34) dargestellt. |
Rem | Schriftgröße des Stammelements (standardmäßig 16 Pixel). |
lh | Zeilenhöhe des Elements |
rlh | Zeilenhöhe des Stammelements. |
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.
Einheit | bezogen auf |
---|---|
vw | 1% der Breite des Darstellungsbereichs Nutzer verwenden diese Einheit, um coole Schriftarten anzuwenden, wie die Schriftart in der Kopfzeile basierend auf der Breite der Seite zu ändern. Wenn der Nutzer die Schriftart ändert, ändert sich auch die Schriftart. |
vh | 1% der Höhe des Darstellungsbereichs Damit können Sie Elemente in einer UI anordnen, wenn Sie beispielsweise eine Fußzeilensymbolleiste haben. |
vi | 1% der Größe des Darstellungsbereichs auf 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 auf der Blockachse des Stammelements Für die Blockachse wäre dies die Richtung der Sprache. LTR-Sprachen wie Englisch haben eine vertikale Blockachse, da englischsprachige Leser die Seite von oben nach unten parsen. 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 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
Welche der folgenden Dimensionen sind zulässig?
Wie unterscheiden sich absolute und relative Einheiten?
Darstellungsbereichseinheiten sind absolute Einheiten.