Heim  >  Artikel  >  Web-Frontend  >  Was bedeutet das em-Tag in CSS?

Was bedeutet das em-Tag in CSS?

下次还敢
下次还敢Original
2024-04-28 16:27:15647Durchsuche

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.

Was bedeutet das em-Tag in CSS?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:So verwenden Sie span in CSSNächster Artikel:So verwenden Sie span in CSS