Praktiken zur Verwendung von em in CSS

Schauen wir uns den vollständigen HTML-Code der Seite an:

html<html>
  <head>
    <title></title>
  </head>
  <body>
    <main>
      <div>
        <p>
          text
        </p>
      </div>
    </main>
  </body>
<html>

Standardmäßig haben alle Tags der Seite eine bestimmte Schriftgröße. Tatsache ist, dass das Tag html standardmäßig eine bestimmte Schriftgröße hat:

csshtml {
  font-size: 16px; /* Standardwert */
}

Daher können wir den Tags der Seite Größen in em zuweisen. Dabei werden sie ihre Größen relativ zu den unmittelbaren Elternelementen berechnen.

Lassen Sie uns zum Beispiel die Schriftgröße für das Tag main festlegen:

cssmain {
  font-size: 1.5em; /* entspricht 24px */
}

Und jetzt legen wir die Schriftgröße für das Tag div fest:

cssdiv {
  font-size: 2em; /* entspricht 48px */
}

html<main>
  <h1>header</h1>
  <div>
    <p>
      text
    </p>
    <p>
      text
    </p>
  </div>
  <div>
    <p>
      text
    </p>
    <p>
      text
    </p>
  </div>
</main>

cssmain {
  margin: 16px auto;
}

h1 {
  font-size: 32px;
}
p {
  font-size: 32px;
}

cssmain {
  margin: 32px auto;
}

h1 {
  font-size: 32px;
}
div {
  font-size: 16px;
  margin-bottom: 32px;
}
p {
  font-size: 20px;
}