Verschiedene Arten von relativen CSS-Einheiten

Es gibt viele Arten relativer Einheiten in CSS, von denen jede ihre anwendbaren Szenarien und Eigenschaften hat. Im Folgenden werden häufig verwendete relative Einheiten vorgestellt und einige spezifische Codebeispiele bereitgestellt.

1. em
   em ist eine Einheit, die relativ zur Schriftgröße des aktuellen Elements berechnet wird. Wenn die Schriftgröße eines Elements beispielsweise 16 Pixel beträgt, entspricht 1em 16 Pixel. Wenn die Schriftgröße eines Elements 2em beträgt, ist seine Schriftgröße doppelt so groß wie die Schriftgröße des übergeordneten Elements.

p {
  font-size: 16px;
}

span {
  font-size: 0.5em; /* 相当于8px */
}

2. rem
   rem ist eine Einheit, die relativ zur Schriftgröße des Stammelements (d. h. des HTML-Elements) berechnet wird. Es wird auf ähnliche Weise wie em verwendet, wird jedoch nicht vom übergeordneten Element beeinflusst.

html {
  font-size: 16px;
}

p {
  font-size: 1.5rem; /* 相当于24px */
}

3. vw/vh
   vw und vh sind Einheiten relativ zur Breite und Höhe des Ansichtsfensters. 1vw entspricht 1 % der Fensterbreite und 1vh entspricht 1 % der Fensterhöhe. Diese Einheit wird häufig im Responsive Design verwendet, um die Größe von Elementen basierend auf der Größe des Ansichtsfensters automatisch zu ändern.

div {
  width: 50vw; /* 相当于视窗宽度的50% */
  height: 30vh; /* 相当于视窗高度的30% */
}

4. %
   Prozenteinheiten werden relativ zur Größe des übergeordneten Elements berechnet. Wenn ein Element beispielsweise eine Breite von 50 % hat, ist seine Breite halb so breit wie das übergeordnete Element.

.container {
  width: 200px;
}

div {
  width: 50%; /* 相当于100px */
}

5. ch
   ch ist eine Einheit, die relativ zur Breite der aktuellen Schriftart berechnet wird. Ein Kanal entspricht der Breite des Zeichens „0“ in der aktuellen Schriftart.

p {
  font-size: 16px;
}

span {
  width: 10ch; /* 相当于160px */
}

Zusammenfassung:
Relative Einheiten bieten eine flexiblere und anpassungsfähigere Layoutmethode in CSS. Wählen Sie die geeignete Einheit entsprechend Ihren Anforderungen. Sie können die entsprechende relative Einheit basierend auf den Eigenschaften des Elements und den Designanforderungen auswählen. Durch die rationelle Verwendung relativer Einheiten können adaptive Layouteffekte erzielt werden.

Das obige ist der detaillierte Inhalt vonVerschiedene Arten von relativen CSS-Einheiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!