Was sind die relativen Einheiten in CSS?

CSS hat viele relative Einheiten, die häufigsten sind Pixel (px), Prozentsatz (%), em (em) und rem (rem). Im Folgenden werden diese vier relativen Einheiten vorgestellt und spezifische Codebeispiele gegeben.

1. Pixel (px):
   Pixel sind Einheiten relativ zur Bildschirmauflösung. Der Wert ist fest und ändert sich nicht entsprechend den Einstellungen des Benutzers. Wenn Sie beispielsweise die Breite eines Elements auf 100 Pixel festlegen, bleibt seine Breite 100 Pixel.

Codebeispiel:

div {
  width: 100px;
  height: 50px;
}

2. Prozentsatz (%):
   Prozentsatz ist eine Einheit relativ zum übergeordneten Element und sein Wert ändert sich basierend auf der Größe des übergeordneten Elements. Mit anderen Worten: Prozenteinheiten können die Größe von Elementen automatisch an Änderungen der Bildschirmgröße anpassen. Wenn beispielsweise die Breite des übergeordneten Elements 200 Pixel beträgt und Sie die Breite des untergeordneten Elements auf 50 % festlegen, nimmt das untergeordnete Element die Hälfte der Breite des übergeordneten Elements ein.

Codebeispiel:

.parent {
  width: 200px;
}

.child {
  width: 50%;
  height: 50px;
}

3. em (em):
   em ist eine Einheit relativ zur eigenen Schriftgröße des Elements. Wenn die Schriftgröße eines Elements beispielsweise 16 Pixel beträgt, entspricht 1em 16 Pixel, 2em entspricht 32 Pixel und so weiter. Die Em-Einheit kann die relative Anpassung der Schriftgröße problemlos realisieren.

Codebeispiel:

p {
  font-size: 16px;
}

span {
  font-size: 1.5em; /* 相当于24px */
}

4. rem (rem):
   rem ähnelt em, ist jedoch die Schriftgröße relativ zum Stammelement (bezieht sich im Allgemeinen auf das HTML-Element). Die Rem-Einheit kann die Schriftgröße auf der gesamten Seite einheitlich steuern und gleichzeitig eine relative Anpassung ermöglichen.

Codebeispiel:

html {
  font-size: 16px;
}

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

Zusammenfassung:
Die relativen Einheiten in CSS sind Pixel (px), Prozentsatz (%), em (em) und rem (rem). Die Pixeleinheiten sind festgelegt und ändern sich nicht basierend auf den Benutzereinstellungen. Prozenteinheiten ändern sich relativ zur Größe des übergeordneten Elements. Em-Einheiten sind Einheiten relativ zur Schriftgröße des Elements selbst, während rem-Einheiten Einheiten relativ zur Schriftgröße des Stammelements sind. In praktischen Anwendungen können wir geeignete relative Einheiten auswählen, um die Größe von Elementen und Schriftgrößen nach Bedarf zu steuern.

Das obige ist der detaillierte Inhalt vonWas sind die relativen Einheiten in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!