Was bedeutet das em-Tag in CSS?

EM stellt in CSS eine Längeneinheit relativ zur aktuellen Schriftgröße dar, die als „em“ bezeichnet wird (z. B. Schriftgröße: 1,2em;). Es unterscheidet sich von PX (Pixel) und REM (Root EM) darin, dass es relativ zur aktuellen Schriftgröße ist, während PX absolut ist und Bildschirmpixel darstellt und REM relativ zur Schriftgröße des Stammelements des Dokuments ist. EM wird verwendet, um Textgröße und -abstand anzupassen, um die Textgröße entsprechend den Benutzerpräferenzen anzupassen, responsive Designs zu erstellen und den Abstand zwischen Elementen zu definieren.

Die Bedeutung des EM-Tags in CSS

EM ist eine Einheit in CSS, die eine Länge relativ zur aktuellen Schriftgröße darstellt.

So verwenden Sie EM

Dem EM-Wert folgt ein Buchstabe „m“, zum Beispiel:

<code>font-size: 1.2em;</code>

Dadurch wird die Schriftgröße des Textes auf das 1,2-fache der aktuellen Schriftgröße eingestellt.

Der Unterschied zwischen EM und PX und REM

• PX (Pixel) ist eine absolute Einheit, die die physischen Pixel auf dem Bildschirm darstellt.
• EM ist eine relative Einheit, relativ zur aktuellen Schriftgröße.
• REM (root EM) ist ebenfalls eine relative Einheit, jedoch relativ zur Schriftgröße des Root-Elements des Dokuments.

Wann EM zu verwenden ist

EM eignet sich zum Ändern der Größe und des Abstands von Text, ohne seine Proportionen zu ändern. Es ist besonders nützlich für:

• Ändern der Textgröße basierend auf Benutzerpräferenzen
• Erstellen responsiver Designs, die sich automatisch an unterschiedliche Bildschirmgrößen anpassen
• Definieren des Abstands zwischen Elementen

Beispiel

<code>body {
  font-size: 16px;
}

h1 {
  font-size: 2em;  /* 相对于正文文本的 2 倍 */
}

p {
  margin-bottom: 1em;  /* 相对于正文文本的 1 倍 */
}</code>

Der obige Code wird:

• Einstellen Stellen Sie die Schriftgröße des Textkörpers auf 16 Pixel ein. Stellen Sie die Schriftgröße des h1-Tags auf das Zweifache des Textkörpers ein. Stellen Sie den Rand unter dem Tag p auf das Einfache des Textkörpers ein

Das obige ist der detaillierte Inhalt vonWas bedeutet das em-Tag in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!