Was bedeuten „em“ und „rem“ und wie wendet man beide korrekt an – Teil 2
Was bedeuten „em“ und „rem“ und wie wendet man beide korrekt an – Teil 2

Was bedeuten „em“ und „rem“ und wie wendet man beide korrekt an – Teil 2

Wiki

Im vorigen Beitrag bin ich auf die Definition von „em“ als Proportionsgrösse eingegangen. Hier werde ich „rem“ im Detail erklären.

Entgegen „em“ wo ich nicht herausfinden konnte was das in der Abkürzung bedeutet, ist das bei „rem“ anders. „rem“ steht für „root-em“.

rem

„root-em“ oder “rem“ bezieht sich auf das Wurzelelement, was in HTML das html-Element ist. „html“ ist das oberste Element in der Markup-Hierarchie, wie Du diesem Beispiel entnehmen kannst.

<!DOCTYPE html>
<hmtl>
  <head>
    <link href="style.css" type="text/css" rel="stylesheet">
  </head>
  <body>
    <div class="artikel">
      <h1>H1 Überschrift</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
      <h2>H2 Überschrift</h2>
      <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</>
      </div>
    </body>
</html>

Im Stylesheet wurde hier für das html-Element die Schriftgrösse 36 Pixel festgelegt.

html {
  font-size: 36px;
}

.artikel {
    font-size: 18px;
}

h1 {
    font-size: 1.0rem;
}

h2{
    font-size: 0.75rem;
}

p {
    font-size:0.5rem;
}

Die proportionalen Grössen die durch „rem“ festgelgt wirden ergeben das folgende Resultat:

  • h1 hat 1.0rem, heisst die Proportion bleibt 1:1 und ergibt 36 Pixel
  • h2 hat 0.75rem was zu 36*0,75=27 Pixeln führt
  • p hat 0.5rem was hier einer Schriftgrösse von 18px entspricht

Das Ergebnis im Browser sieht obwohl ich das Stylesheet verändert habe im Browser gleich aus:

Anmerkung

Die Klasse „artikel“ habe ich bewusst im Stylesheet drin gelassen um das Ergebnis von rem zu zeigen.

Die Klasse „artikel“ ist dem div-Container zugeordnet in dem sich sowohl die Überschirften h1 und h2, als auch p befinden. Sie definiert die Schriftgrösse 18 Pixel.

Da aber h1, h2 und p rem-Grössen zugeordnet wurden, heisst proportionale Grössen zum Root-Element „html“ hat die Klasse für diese Schriften keine Relevanz.

Dieses und das letzte Beispiel zeigen also den grundlegenden Unterschied zwischen „em“ und „rem“. Einfacher denke ich kann man dies nicht erklären.

Alles in Allem finde ich „rem“ vorteilhafter gegenüber „em„, da man sich hier nur um daas Root-Element kümmern muss. Was denkst Du? Schreib gerne Deine Meinung in die Kommentare.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.