Beim Stylen von Elementen in CSS stehen Ihnen zwei Kategorien von Einheiten zur Auswahl: absolute Einheiten und relative Einheiten. Hier finden Sie eine Aufschlüsselung der einzelnen Elemente und deren Unterschiede:

1. Absolute Einheiten

Absolute Einheiten sind feste Maßeinheiten. Sie werden nicht von anderen Elementen oder Bildschirmgrößen beeinflusst, was bedeutet, dass ihre Größe unabhängig vom Kontext, in dem sie verwendet werden, konstant bleibt.

Gemeinsame absolute Einheiten:

• px (Pixel): Ein Pixel ist ein kleines Quadrat auf dem Bildschirm. Es ist die am häufigsten verwendete Einheit für feste Layouts.

  • Beispiel:

  h1 {
    font-size: 24px;
  }
  

• pt (Punkte): Üblicherweise in Druckmedien verwendet, entspricht 1pt 1/72 Zoll.

• cm (Zentimeter) und in (Zoll): Diese Einheiten werden selten im Webdesign verwendet und basieren auf physikalischen Abmessungen.

Vorteile absoluter Einheiten:

• Konsistenz: Die Größe bleibt immer gleich, unabhängig vom Gerät oder der Bildschirmgröße.
• Vorhersehbar: Ideal zum Erstellen fester Layouts, bei denen das Design auf allen Plattformen genau gleich aussehen soll.

Nachteile:

• Mangelnde Flexibilität: Absolute Einheiten passen sich nicht gut an unterschiedliche Bildschirmgrößen oder Zoomeinstellungen an, wodurch sie weniger reaktionsschnell sind.

2. Relative Einheiten

Relative Einheiten sind flexibel und skalieren basierend auf dem Kontext, in dem sie verwendet werden. Ihre Größe hängt von anderen Elementen ab, z. B. dem übergeordneten Container, dem Ansichtsfenster oder der Basisschriftgröße.

Gemeinsame relative Einheiten:

• em: Relativ zur Schriftgröße des Elements, für das es verwendet wird. Wenn das übergeordnete Element eine Schriftgröße von 16 Pixel hat, entspricht 1em 16 Pixel. Wenn sich die Größe des übergeordneten Elements ändert, ändert sich auch die Größe in em.

  • Beispiel:

  p {
    font-size: 1.5em; /* 1.5 times the font size of the parent */
  }
  

• rem (root em): Relativ zur Schriftgröße des root-Elements (normalerweise das -Element). Dies macht es im Vergleich zu ihnen vorhersehbarer.

Standardmäßig legen Browser die Stammschriftgröße normalerweise auf 16 Pixel fest, sofern nicht anders angegeben. Wenn Sie eine benutzerdefinierte Schriftgröße für das Element definieren, werden alle REM-Werte basierend auf dieser neuen Größe berechnet.

• Beispiel:
  

  p {
    font-size: 2rem; /* 2 times the root font size */
  }
  

  • % (Prozent): Relativ zur Größe des übergeordneten Elements. Mit width: 50 % erhält das Element beispielsweise 50 % der Breite seines übergeordneten Containers.

• Beispiel:
  

  div {
    width: 75%; /* 75% of the parent's width */
  }
  

  • vw (Ansichtsfensterbreite) und vh (Ansichtsfensterhöhe): Diese Einheiten beziehen sich auf das Ansichtsfenster des Browsers. 1vw ist 1 % der Breite des Ansichtsfensters und 1vh ist 1 % der Höhe des Ansichtsfensters.

• Beispiel:
  

  div {
    width: 50vw; /* 50% of the viewport's width */
  }
  

Vorteile relativer Einheiten:

• Responsives Design: Relative Einheiten werden automatisch basierend auf Bildschirmgröße, Schriftgröße oder Containerabmessungen skaliert, wodurch Ihr Design flexibler wird.
• Einfacher zu pflegen: Durch Ändern der Schriftgröße des Stammelements (mit rem) kann Ihr gesamtes Design skaliert werden.

Nachteile:

• Kann schwieriger zu kontrollieren sein: Ohne ein gutes Verständnis der Vererbung und der Art und Weise, wie Größen durch Elemente kaskadieren, können relative Einheiten manchmal zu unerwarteten Ergebnissen führen.

Wann sollten absolute oder relative Einheiten verwendet werden?

• Absolute Einheiten (wie px) eignen sich am besten, wenn Sie präzise, ​​feste Messungen benötigen. Verwenden Sie diese, wenn Sie möchten, dass etwas überall die gleiche Größe hat (z. B. ein kleines Logo oder Symbol).
• Relative Einheiten (wie em, rem, vw und %) sind ideal für responsives Design. Sie ermöglichen die Skalierung und Anpassung von Elementen basierend auf der Bildschirmgröße oder dem übergeordneten Element, wodurch Ihr Design flexibler wird.

Beispiel: Absolute vs. relative Einheiten in der Praxis

This is 24px text
This is 1.5rem text (24px based on root size)

In diesem Beispiel:

• Die absolute Schriftgröße (24 Pixel) bleibt immer gleich.
• Die relative Schriftgröße (1,5rem) wird basierend auf der Stammschriftgröße (16px) angepasst, was zu 24px führt.

Abschluss:

• Verwenden Sie absolute Einheiten, wenn geräteübergreifende Konsistenz erforderlich ist. Beachten Sie jedoch, dass diese nicht reagieren.
• Verwenden Sie relative Einheiten für flexiblere und reaktionsfähigere Designs, insbesondere bei der Entwicklung für mehrere Bildschirmgrößen und Geräte.