CSS - Maßeinheiten

Leon A. -

Absolute Einheiten

Pixel (px)

Pixel (px) sind eine Einheit fester Größe in CSS. Sie sind die grundlegendste und am weitesten verbreitete Maßeinheit. Ein Pixel entspricht normalerweise einem einzelnen Punkt auf dem Bildschirm, wobei dies je nach Bildschirmauflösung des Geräts variieren kann. Pixel sind nützlich, wenn Sie eine präzise Kontrolle über Elementgrößen und -positionierung benötigen.

Zu den Vorteilen der Verwendung von Pixeln gehören ihre Einfachheit und Konsistenz über verschiedene Geräte hinweg. Sie ermöglichen exakte Messungen und sind leicht zu verstehen. Pixel haben jedoch auch einige Nachteile. Sie skalieren nicht gut, wenn der Benutzer die Seite vergrößert oder verkleinert, was die Zugänglichkeit beeinträchtigen kann. Die Verwendung fester Pixelgrößen kann es erschweren, responsive Designs zu erstellen, die sich an verschiedene Bildschirmgrößen anpassen.

Punkte (pt)

Punkte (pt) sind eine weitere absolute Maßeinheit. Ein Punkt entspricht 1/72 Zoll. Punkte werden häufiger in Printmedien verwendet, können aber auch in CSS eingesetzt werden. Sie bieten eine Möglichkeit, Größen relativ zu einer festen Maßeinheit anzugeben.

Im Vergleich zu Pixeln werden Punkte im Web seltener verwendet. Sie können nützlich sein, wenn Sie Stile für Elemente erstellen, die gedruckt werden sollen, wie Rechnungen oder Berichte. Allerdings bieten Punkte nicht die gleiche Präzision wie Pixel und werden möglicherweise nicht immer einheitlich auf verschiedenen Geräten dargestellt.

Zoll (in) und Zentimeter (cm)

Zoll (in) und Zentimeter (cm) sind absolute Einheiten, die von physischen Messungen übernommen wurden. Ein Zoll entspricht 96 Pixeln bei einer Bildschirmauflösung von 96 DPI (Dots per Inch). Zentimeter sind ähnlich, wobei ein Zentimeter 37,8 Pixeln bei 96 DPI entspricht.

Diese Einheiten werden im Webdesign selten verwendet, da sie sich aufgrund der unterschiedlichen Monitorgrößen und Auflösungen nicht gut für bildschirmbasierte Medien eignen. Dies macht es schwierig vorherzusagen, wie Elemente, die in Zoll oder Zentimetern gemessen werden, genau auf Bildschirmen erscheinen werden.

Relative Einheiten

Prozentangaben (%)

Prozentangaben (%) sind relative Maßeinheiten in CSS. Sie definieren Größen, Abstände und Positionierungen von Elementen relativ zu ihrem übergeordneten Container. Die in Prozent angegebene Größe eines Elements wird basierend auf der Größe seines übergeordneten Elements berechnet.

Prozentangaben-Beispiel

<div style="width: 50%;">Dieses div nimmt die Hälfte der Breite seines übergeordneten Containers ein.</div>

Em (em)

Em (em) ist eine relative Einheit, die auf der Schriftgröße eines Elements basiert. Ein em entspricht der Schriftgröße des Elements. Wenn ein Element beispielsweise eine Schriftgröße von 16 Pixeln hat und Sie den Abstand auf 1em setzen, entspricht der Abstand 16 Pixeln.

Em-Beispiel

<div style="font-size: 16px; padding: 1em;">Dieses div hat einen Abstand, der seiner Schriftgröße von 16 Pixeln entspricht.</div>

Rem (rem)

Rem (rem) ist ähnlich wie em, bezieht sich aber auf die Schriftgröße des Wurzelelements (normalerweise ). "Rem" steht für "root em".

Der Hauptunterschied zwischen rem und em besteht darin, dass rem-Einheiten immer auf der Schriftgröße des Wurzelelements basieren, während em-Einheiten auf der eigenen Schriftgröße eines Elements basieren. Dies macht rem-Einheiten berechenbarer und einfacher im Umgang mit verschachtelten Elementen.

Rem-Beispiel

<div style="font-size: 16px;"> 
    <div style="font-size: 2rem;">Die Schriftgröße dieses divs ist doppelt so groß wie die Schriftgröße des Wurzelelements.</div>
</div>

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

Viewport-Einheiten sind relative Maße basierend auf der Viewport-Größe - dem sichtbaren Bereich einer Webseite:

  1. vw (viewport width): 1vw entspricht 1% der Viewport-Breite.
  2. vh (viewport height): 1vh entspricht 1% der Viewport-Höhe.
  3. vmin (viewport minimum): 1vmin entspricht dem kleineren Wert zwischen vw oder vh.
  4. vmax (viewport maximum): 1vmax entspricht dem größeren Wert zwischen vw oder vh.

Viewport-Einheiten helfen, Elemente zu erstellen, die sich unabhängig von der Bildschirmgröße an die Viewport-Dimensionen anpassen:

  • Wenn Sie die Breite eines Elements auf 50vw setzen, nimmt es die Hälfte der Viewport-Breite ein.
  • Nützlich für bildschirmfüllende Abschnitte oder responsive Typografie, die sich geräte- und orientierungsübergreifend anpasst.

Viewport-Einheiten-Beispiel

<div style="width: 50vw; height: 50vh;">Dieses div nimmt die Hälfte der Breite und Höhe des Viewports ein.</div>

Wann man welche Einheit verwendet

Die Wahl der richtigen Maßeinheit in CSS hängt von der Situation ab und davon, wie sich Elemente auf Ihrer Webseite verhalten sollen. Hier sind einige Richtlinien für die Verwendung von absoluten und relativen Einheiten:

Verwenden Sie absolute Einheiten wie Pixel (px), wenn Sie eine genaue Kontrolle über Elementgrößen und -positionierung benötigen. Pixel sind in diesen Fällen nützlich:

  • Erstellung von Layouts mit fester Breite
  • Definition von Rändern und Liniendicke
  • Festlegung exakter Abmessungen für Bilder und Medienelemente

Vermeiden Sie die Verwendung von Pixeln für Schriftgrößen, da diese sich nicht gut skalieren lassen, wenn der Benutzer die Seite vergrößert oder verkleinert.

Verwenden Sie relative Einheiten wie Prozent (%), wenn Sie möchten, dass sich Elemente an die Größe ihres übergeordneten Containers anpassen. Prozentangaben sind in diesen Situationen hilfreich:

  • Erstellung von responsiven Layouts, die sich an verschiedene Bildschirmgrößen anpassen
  • Definition von Breiten und Höhen von Elementen relativ zu ihrem übergeordneten Element
  • Positionierung von Elementen mit relativen Werten (z.B. left: 50%; top: 25%)

Verwenden Sie Em-Einheiten, wenn Sie Größen relativ zur Schriftgröße eines Elements festlegen möchten. Em-Einheiten eignen sich gut für:

  • Festlegung von Innen- und Außenabständen, die sich mit der Schriftgröße skalieren
  • Definition von Größen für verschachtelte Elemente, die die Schriftgröße von ihrem übergeordneten Element erben
  • Erstellung skalierbarer Typografie, die Proportionen beibehält

Verwenden Sie Rem-Einheiten, wenn Sie Größen relativ zur Schriftgröße des Wurzelelements festlegen möchten. Rem-Einheiten helfen bei:

  • Konsistente Definition von Schriftgrößen und Abständen im gesamten Dokument
  • Erstellung skalierbarer Komponenten unabhängig von der Schriftgröße ihres übergeordneten Elements
  • Beibehaltung konsistenter Proportionen, auch wenn sich die Basis-Schriftgröße ändert

Verwenden Sie Viewport-Einheiten (vw, vh, vmin, vmax), wenn Sie möchten, dass sich Elemente an die Viewport-Größe anpassen. Viewport-Einheiten eignen sich gut für:

  • Erstellung von Vollbild-Abschnitten oder Hero-Bildern
  • Responsive Gestaltung der Typografie für verschiedene Bildschirmgrößen
  • Definition von Größen und Abständen basierend auf den Viewport-Abmessungen

Sie können auch verschiedene Maßeinheiten für flexiblere Designs kombinieren.

Beispiel: Kombination von Einheiten für mehr Flexibilität

<div style="width: 50%; border: 2px solid black; font-size: 1rem; padding: 1em;"> 
    Dieses Element kombiniert Prozentangaben für die Breite, Pixel für die Randdicke, Rem für die Schriftgröße und Em für den Innenabstand.
</div>

Die Wahl der Maßeinheit hängt von den Anforderungen Ihres Projekts und dem gewünschten Grad der Responsivität ab. Experimentieren Sie mit verschiedenen Einheiten und Kombinationen, um herauszufinden, was am besten funktioniert.