CSS-Größeneinheiten verstehen: px, em, rem, %, und mehr

In CSS gibt es eine Vielzahl von Einheiten, um die Größe von Elementen zu steuern, von Pixeln (px) über Prozentsätze (%) bis hin zu relativen Einheiten wie em und rem. Die Auswahl der richtigen Einheit für Ihr Design kann entscheidend für die Erstellung ansprechender und zugänglicher Layouts sein. In diesem Leitfaden werden die gängigsten CSS-Größeneinheiten behandelt, wann diese verwendet werden sollten und wie sie sich auf Ihr Layout auswirken.

---

1. Pixel (px)

Pixel sind eine der häufigsten absoluten Einheiten in CSS. Ein px repräsentiert ein physisches Pixel auf dem Bildschirm. Da dies behoben ist, bedeutet die Verwendung von px, dass das Element unabhängig von den Einstellungen des Benutzers die gleiche Größe behält.

Wann man px verwendet:

• Verwenden Sie px für präzise, ​​feste Elemente wie Symbole oder Rahmen.
• Vermeiden Sie px für Text, da diese die Zugänglichkeit beeinträchtigen können, wenn Benutzer die Zoomstufen des Browsers anpassen.

Beispiel:

p {
  font-size: 16px;
  width: 200px;
}

---

2. Prozentsätze (%)

Die %-Einheit ist relativ, d. h. sie passt sich an die Größe des übergeordneten Elements an. Diese Flexibilität macht % zu einem unverzichtbaren Werkzeug für responsives Design, insbesondere für flüssige Layouts, bei denen die Größe von Elementen basierend auf dem Ansichtsfenster geändert wird.

Wann ist % zu verwenden:

• Verwenden Sie % für Layoutelemente wie Container oder Bilder, die relativ zu ihrem übergeordneten Container angepasst werden sollen.
• Kombinieren Sie % mit Medienabfragen, um flüssige, reaktionsfähige Designs zu erstellen.

Beispiel:

.container {
  width: 80%; /* 80% of the parent element's width */
}

---

3. em-Einheiten

Die Geviert-Einheit ist eine relative Einheit basierend auf der Schriftgröße des nächstgelegenen übergeordneten Elements. Wenn keine übergeordnete Schriftgröße definiert ist, wird standardmäßig die Basisschriftgröße des Browsers verwendet (normalerweise 16 Pixel).

Wichtige Punkte:

• 1em entspricht der Schriftgröße des übergeordneten Elements.

• 1em ist doppelt so groß und so weiter.

• Seien Sie beim Verschachteln vorsichtig, da sich die Em-Werte vervielfachen können, wenn sie auf verschachtelte Elemente angewendet werden.

Wann man sie verwendet:

• Für Abstands-, Füll- oder Randanpassungen im Verhältnis zur Textgröße.

• Für Schriftgrößen in Komponenten, die relativ zur Textgröße ihrer Eltern angepasst werden sollten.

Beispiel:

.container {
  font-size: 16px;
}

.child {
  padding: 1.5em; /* 1.5 times the font size of .container */
}

---

4. rem-Einheiten

Im Gegensatz zu em basiert die rem-Einheit auf der Schriftgröße des Stammelements (), was bedeutet, dass 1rem im gesamten Dokument konsistent ist (häufig 16 Pixel, sofern nicht angepasst). Dies macht rem zu einer zuverlässigen Einheit für konsistente Typografie und Abstände auf einer Webseite.

Wann sollte rem verwendet werden:

• Für einheitliche Schriftgrößen über alle Komponenten hinweg, unabhängig von verschachtelten Elementen.

• Um ein besser skalierbares und wartbares Design mit einem klaren Bezugspunkt zu erreichen.

Beispiel:

p {
  font-size: 16px;
  width: 200px;
}

---

5. Viewport-Einheiten (vw und vh)

Ansichtsfenstereinheiten – vw (Ansichtsfensterbreite) und vh (Ansichtsfensterhöhe) – sind reaktionsfähige Einheiten, die auf der Größe des Ansichtsfensters (Browserfensters) basieren. 1vw entspricht 1 % der Breite des Ansichtsfensters und 1vh entspricht 1 % der Höhe des Ansichtsfensters.

Wann sollten vw und vh verwendet werden:

• Für Elemente, die mit der Browsergröße skaliert werden sollten, wie z. B. ganzseitige Hero-Abschnitte.

• Um eine responsive Typografie zu erstellen, die sich an die Bildschirmbreite anpasst.

Beispiel:

.container {
  width: 80%; /* 80% of the parent element's width */
}

---

6. Flexible Längeneinheiten (Min., Max. und Klemme)

Neuere Einheiten wie min(), max() und clamp() sind leistungsstark für responsives Design und ermöglichen eine bedingte Größenanpassung basierend auf dem kleinsten oder größten Wert.

min(a, b): Nimmt den kleinsten von zwei Werten an.
max(a, b): Nimmt den größten von zwei Werten an.
Klammer(min, bevorzugt, max): Legt einen Wert fest, der sich innerhalb eines definierten Bereichs anpasst.

Wann anzuwenden:

• Für responsive Typografie, die in einen bestimmten Bereich passt.
• Zur Größenanpassung von Komponenten basierend auf dem Ansichtsfenster, jedoch mit einer Mindest- oder Höchstgrenze.

Beispiel:

.container {
  font-size: 16px;
}

.child {
  padding: 1.5em; /* 1.5 times the font size of .container */
}

---

Abschluss

Jede CSS-Einheit hat ihre eigenen Stärken und idealen Anwendungsfälle:

• px für präzise, ​​feste Elemente.
• % für flüssige, reaktionsfähige Layoutkomponenten.
• em für die Skalierung relativ zu übergeordneten Elementen.
• rem für eine konsistente Skalierung auf der gesamten Seite.
• Ansichtsfenstereinheiten für dynamische, ansichtsfensterbasierte Elemente.
• Flexible Einheiten wie clamp() für adaptives, bedingtes Styling.

Die Beherrschung dieser CSS-Einheiten kann Ihnen dabei helfen, flexible, zugängliche und wartbare Layouts zu erstellen. Kombinieren Sie sie je nach Ihren Designanforderungen und erleben Sie, wie Ihr Layout zum Leben erwacht! Viel Spaß beim Stylen!

Das obige ist der detaillierte Inhalt vonCSS-Größeneinheiten verstehen: px, em, rem, %, und mehr. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!