CSS - Maßeinheiten

Pixel (px)

Pixel (px) sind eine Einheit mit fester Größe in CSS. Sie ändern ihre Größe nicht im Verhältnis zu anderen Elementen oder dem Viewport. Ein Pixel stellt einen einzelnen Punkt auf dem Bildschirm dar.

Bei der Verwendung von Pixeln legen Sie eine genaue Größe für ein Element fest. Wenn Sie beispielsweise die Breite eines div auf 200px setzen, wird es genau 200 Pixel breit, unabhängig von der Bildschirmgröße oder Auflösung.

.container {
  width: 300px;
  height: 200px;
  font-size: 16px;
}

Vorteile der Verwendung von Pixeln:

• Präzise Kontrolle über Elementgrößen
• Einheitliches Erscheinungsbild auf verschiedenen Geräten mit gleicher Pixeldichte
• Leicht zu verstehen und zu verwenden für Anfänger

Nachteile der Verwendung von Pixeln:

• Mangelnde Flexibilität und Anpassungsfähigkeit
• Können auf Geräten mit unterschiedlicher Pixeldichte zu klein oder zu groß erscheinen
• Nicht skalierbar für Benutzer, die ein- oder auszoomen müssen

Trotz dieser Nachteile werden Pixel immer noch häufig für bestimmte Elemente verwendet, die exakte Größen erfordern, wie Bilder, Symbole und Rahmen. Für Typografie und Layout wird jedoch im Allgemeinen empfohlen, relative Einheiten zu verwenden, um eine bessere Anpassungsfähigkeit und Zugänglichkeit zu erreichen.

Prozentangaben (%)

Prozentangaben sind Einheiten in CSS, mit denen Sie Größen und Positionen von Elementen relativ zu ihrem übergeordneten Container festlegen können. Die in Prozent angegebene Größe eines Elements ist ein Bruchteil der Größe seines übergeordneten Elements.

Um die tatsächliche Größe eines Elements mit Prozentangaben zu berechnen, multiplizieren Sie den Prozentwert mit der entsprechenden Dimension des übergeordneten Elements. Wenn beispielsweise ein übergeordnetes Element eine Breite von 500px hat und sein untergeordnetes Element eine Breite von 50% hat, beträgt die tatsächliche Breite des untergeordneten Elements 250px (50% von 500px).

.parent {
  width: 500px;
}

.child {
  width: 50%;
  padding: 10%;
}

Das untergeordnete Element hat eine Breite von 250px (50% der Breite des übergeordneten Elements) und einen Innenabstand von 50px (10% der Breite des übergeordneten Elements).

Em (em)

Die em-Einheit basiert auf der Schriftgröße eines Elements. Ein em entspricht der Schriftgröße des Elements. Wenn ein Element eine Schriftgröße von 16px hat, dann entspricht ein em für dieses Element 16px.

Bei der Verwendung von em für andere Eigenschaften als die Schriftgröße wird der Wert relativ zur Schriftgröße berechnet. Das bedeutet, dass sich bei einer Änderung der Schriftgröße auch die in em angegebenen Größen proportional ändern.

.container {
    font-size: 16px;
}

.heading {
    font-size: 2em; /* 32px (2 * 16px) */
    margin-bottom: 1.5em; /* 24px (1.5 * 16px) */
}

Die Überschrift hat eine Schriftgröße von 32px (2-mal die Schriftgröße des übergeordneten Elements) und einen unteren Rand von 24px (1,5-mal ihre eigene Schriftgröße).

Rem (rem)

Die rem-Einheit (root em) ist ähnlich wie em, bezieht sich aber immer auf die Schriftgröße des Wurzelelements (html) und nicht auf die Schriftgröße des Elements selbst. Dadurch bleiben rem-Werte im gesamten Dokument konsistent, unabhängig von der Verschachtelungsebene oder lokalen Änderungen der Schriftgröße.

Standardmäßig haben die meisten Browser eine Wurzelschriftgröße von 16px. Wenn Sie also die Größe eines Elements auf 1,5rem festlegen, wird sie als 1,5*16=24 Pixel berechnet.

html {
   font-size: 16px;
}

.container {
   font-size: 1.2rem; /* 19.2px (1.2 * 16px) */
   padding: 2rem; /* 32px (2 * 16px) */
}

Das Container-Element hat eine Schriftgröße von 19,2px und einen Innenabstand von 32px, unabhängig von der Schriftgröße des übergeordneten Elements.

Die Verwendung von rem für die Größenbestimmung und Abstandsgestaltung von Elementen hilft, die Konsistenz zu wahren und erleichtert die Skalierung des gesamten Designs durch Änderung der Wurzelschriftgröße.

Viewport-Einheiten (vw, vh, vmin, vmax)

Viewport-Einheiten basieren auf der Größe des Viewports (der sichtbare Bereich einer Webseite). Es gibt vier Viewport-Einheiten in CSS:

• vw (viewport width): ein vw entspricht einem Prozent der Viewport-Breite.
• vh (viewport height): ein vh entspricht einem Prozent der Viewport-Höhe.
• vmin (viewport minimum): ein vmin entspricht der kleineren Dimension zwischen vw oder vh.
• vmax (viewport maximum): ein vmax entspricht der größeren Dimension zwischen vw oder vh.

Diese Einheiten sind nützlich für die Erstellung responsiver Designs, da sie es Elementen ermöglichen, sich automatisch an verschiedene Bildschirmgrößen anzupassen.

.hero {
   width: 100vw;
   height: 50vh;
   font-size: 5vmin;
}

Das Hero-Element hat eine Breite, die 100% der Viewport-Breite entspricht, eine Höhe, die 50% der Viewport-Höhe entspricht, und eine Schriftgröße, die fünf Prozent der kleineren Dimension zwischen Höhe oder Breite entspricht.

Mit Viewport-Einheiten können Sie Elemente erstellen, die proportional mit der Größe des Viewports skalieren. Dies macht Ihr Design responsiver und anpassungsfähiger an verschiedene Geräte und Bildschirmgrößen.

Ex (ex)

Die Einheit ex ist eine relative Einheit in CSS, die auf der x-Höhe der aktuellen Schriftart basiert. Die x-Höhe ist die Höhe der Kleinbuchstaben (wie "x") in einer Schriftart, ohne Ober- und Unterlängen. Ein ex entspricht der x-Höhe der Schriftart.

Die ex-Einheit wird nicht so häufig verwendet wie Einheiten wie em oder rem, kann aber nützlich sein, wenn Sie Elemente relativ zur x-Höhe einer Schriftart dimensionieren möchten.

Um den Wert von ex zu berechnen, multiplizieren Sie die gewünschte Größe mit der x-Höhe der Schriftart. Wenn die x-Höhe einer Schriftart 8px beträgt und Sie möchten, dass ein Element dreimal so hoch ist, setzen Sie seine Größe auf 3ex (was 24px entspricht).

.container {
  font-size: 16px;
}

.example {
  width: 10ex;
  height: 2ex;
  border: 1px solid black;
}

Die Breite von .example wird zehnmal die x-Höhe der Schriftart betragen, und ihre Höhe wird das Zweifache dieser Höhe sein.

Ch (ch)

Die ch-Einheit ist eine weitere relative Einheit in CSS, die die Breite des "0" (Null) Zeichens in der aktuellen Schriftart darstellt. Sie hilft, wenn Sie Elemente basierend auf Zeichen dimensionieren möchten.

Ein ch entspricht der Breite des "0"-Zeichens in Schriftarten. Dies macht es gut geeignet, um Breiten für Eingabefelder oder Textcontainer festzulegen, die eine bestimmte Anzahl von Zeichen aufnehmen sollen.

Um den Wert von ch zu berechnen, multiplizieren Sie die gewünschte Anzahl von Zeichen mit der Breite des "0"-Zeichens in Schriftarten. Wenn das "0"-Zeichen etwa acht Pixel breit ist und Sie möchten, dass ein Eingabefeld zwanzig Zeichen aufnehmen kann, setzen Sie seine Breite auf zwanzig ch, was einhundertsechzig Pixeln entspricht.

.container {
    font-size: 16px;
}

.input-field {
    width: 20ch;
    padding: 0.5em;
    border: 1px solid #ccc;
}

Das .input-field hat eine Breite, die ungefähr zwanzig Zeichen aufnehmen kann, vorausgesetzt, das "0"-Zeichen ist in der gewählten Schriftart etwa acht Pixel breit.