Was bedeuten „em“ und „rem“ und wie wendet man beides korrekt an – Teil 1
Was bedeuten „em“ und „rem“ und wie wendet man beides korrekt an – Teil 1

Was bedeuten „em“ und „rem“ und wie wendet man beides korrekt an – Teil 1

Wiki

Wenn man in CSS Grössen festlegt dann gibt es dafür insgesamt 4 Masseinheiten die von Bedeutung sind. Früher als man sich bei der Erstellung von Websites für Desktop Computer lediglich auf die Absolutgrösse Pixel (px) beschränkt hat, war es wesentlich einfacher und überschaubarer. Heute gibt es eine Unzahl an verschiedenen Bildschirngrössen – dank unseren Tablets und Mobiltelefonen – so dass man mit Pixel alleine nicht mehr auskommt.

Jeder Hersteller und fast sogar schon jedes einzelne Gerät hat eine andere Auflösung sowie andere Proportionen in Höhe und Breite und man kann als Webentwickler schlecht für alle Typen ein separates Stylesheet erstellen. Daher greift man heute auf die Relativmasse %, em und rem zurück. Die Einführung dieser 3 Verhältnisgrössen macht uns das Leben beim Entwickeln von Websites und Anwendungen wesentlich leichter.

Doch so schön das Ganze auch klingt, die Arbeit mit diesen Proportionsgrössen erfordert ein wenig Vorkenntnis. Auch wenn Du jetzt denkst dass Du einfach mal herumprobieren kannst und Du schon von selbst drauf kommst, so einfach ist es dann doch wieder nicht.

Im Folgenden möchte ich „em“ und „rem“ so einfach erklären dass Dir die Arbeit mit diesen relativen Grössenangaben in Zukunft keine Probleme mehr machen wird.

em

Wofür „em“ in Abkürzung steht, das konnte ich bisher nicht herausfinden. Sollte ich es in Erfahrung bringen werde ich es gerne nachträglich hier ergänzen.

In der Definition bedeutet „em“ die proportionale Grösse zur Schriftgrösse des Elternelementes.

  • In diesem Beispiel ist das Elternelement (parent) der div-Container mit der Klasse „artikel“.
  • Die Kindelemente (child) sind „h1″, „h2″ sowie „p“.
<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>

Im Stylesheet legen wir die folgenden Punkte fest:

  • Die Schriftgrösse innerhalb des div-Containers mit der Klasse „artikel“ beträgt 18px. Das ist, sofern nicht anders angegeben, übertragbar gültig für alle direkten Kindselemente darin.
  • Allerdings, und hier kommt der entscheidende Faktor um „em“, legen wir proportionale Grössen zum Elternelement fest für „h1“, „h2“ und „p“.
.artikel {
    font-size: 18px:
}
h1 {
    font-size: 2.0em;
}
h2{
    font-size: 1.5em;
}
p {
    font-size:1.0em;
}

Was passiert nun hier genau:

  • Das Elternelement hat die Schriftgrösse 18 Pixel.
  • H1 hat die Proportion 2.0em, heisst den doppelten Wert von 18 Pixeln was zu 36 Pixeln führt
  • H2 hat die Proportion 1.5em, heisst 18 x 1,5 was 27 Pixeln entspricht
  • p hat die Proportion 1.0em, heisst die gleiche Grösse wie sein Elternelement was hier 18 Pixeln entspricht.
    Das Ergebnis im Browser sieht dann so aus.

Zusammenfassung

Auf den Punkt gebracht:

  • Frage 1: Um welches Element handelt es sich und was ist sein Elternelement
  • Wirf dazu einen Blick in den HTML-Code
  • Frage 2: Welche Schriftgrösse hat das Elternelement? Im Zweifelsfall legst Du die im Stylesheet in Pixeln (px) fest.
  • Gib den Kindselementen den Porportionalwert zu ihrem Elternelement, Beispiel 1.0em, 2.0em… usw.
  • Achte immer auf das Verhältnis Elternelement zu Kindselement damit Du nicht durcheinander gerätst. Zu Not kannst Du das im HTML-Code mit Hilfe von Kommentaren markieren.

Damit ich den Rahmen dieses Beitrags nicht sprenge, werde ich im kommenden Artikel im Detail auf die Proportionsgrösse „rem“ eingehen.

Schreibe einen Kommentar

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