Rem vs. Em vs. Px | Wann verwende ich welche Einheit?

AI-Translated

Kuldeep

Technologie

Veröffentlicht am 30 Apr, 2018

6 Minuten Lesezeit

Ihre Inhalte sind das Fundament Ihres Inbound-Marketings. Wenn Sie den Kern verfehlen, riskieren Sie eine erhöhte Absprungrate. Während Art und Menge der Inhalte entscheidend sind, ist es ebenso wichtig zu wissen, wie Sie Ihre Inhalte auf einer Website platzieren und organisieren.

In diesem Marketing-Wettlauf ist die Typografie die Präsentation Ihrer Arbeit. Neben Ihrem Schreibstil sind Schriftart, -größe, -farbe, Fett- und Kursivdruck – einfach alles – für Ihre Endnutzer:innen von Bedeutung. Oft als Kunst bezeichnet, ist sie die Wissenschaft der Innovation, um die Augen an die Seite zu fesseln.

Einführung in rem, em und px

Wenn Sie mit Webdesign vertraut sind, sind Ihnen diese Begriffe zweifellos schon einmal begegnet. Die Best Practice für Typografie im Web ist die Verwendung der relativen Einheiten rem, em und px.

Die meisten gängigen Frameworks aktualisieren das Design mit rem- oder em-Einheiten. Wir haben das beliebte Twitter Bootstrap Framework 3, das früher mit Pixeln arbeitete, aber mit Bootstrap 4, das jetzt auf dem Markt ist, wurde sogar die Typografie mit rem/em aktualisiert.

In diesem Artikel werden wir erörtern, was rem, em und px genau sind und wie man sie verwendet.

Was ist Rem?

Es steht für „Root em“. Es ist eine relative CSS-Einheit, die vom Browser in Pixel (px) übersetzt wird. Wenn rem für die Schriftgröße im Root-Element verwendet wird, stellt es seinen Ausgangswert dar. Wenn wir die Schriftgröße:16px des Root-Elements <html> festlegen, dann ist die Schriftgröße des Absatzes 1rem. Dies impliziert, dass

1rem=16px

Wenn wir die Schriftgröße des Root-Elements von 16px auf 20px ändern, dann wäre 1rem gleich 20px.

html{
  font-size:16px ; /* das bedeutet, 16px entsprechen 1rem */
}

Die Schriftgröße des Absatzes ist hier 1rem. Wenn wir die Schriftgröße für den Absatz auf 18px setzen wollen, dann können wir die Schriftgröße wie folgt berechnen:

html{
  font -size:16px
}

p{
  font-size:1rem;
}

Ebenso können wir auch die Pixel von rem berechnen.
Nehmen wir an, wir setzen die Schriftgröße:16px des Root-HTML-Elements, dann würden wir es wie folgt zählen:

html{
  font -size:16px
}

p{
  font-size:1rem;
}

Falls Sie nun font-size:22px in rem eines Elements setzen wollen, dann können wir die Schriftgröße wie folgt berechnen:

22px/16px = 1.375rem   /* d.h. gleich 22px.*/

Wann sollte man Rem verwenden?

Da sich der Inhalt an die Größe des Geräts anpassen soll, ist es wichtig, dass sich auch Ihre Schriftart anpasst.

Wenn wir die Schriftgröße responsiv zum Gerät halten wollen, dann müssen wir das Root-Element <html> ändern.
Es ist immer gut, responsive Webdesigns zu erstellen.

html {
  font-size:16px;
  @media only screen and (max-width:991px) {
    font-size:14px;
  }
}

Dann passt sich die Schriftgröße automatisch an den Bildschirm an.

Hier ist ein Beispiel:

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <link rel="stylesheet" href="css/style.css">    
  </head>
  <body>
    <div class="outer-wrapper">
      <div class="row">
        <div class="column test-col">
          <h1>This is Heading h1</h1>
          <p>This is Paragraph</p>
        </div>
      </div>
    </div>
  </body>
</html>

Dies ist ein sehr gängiges Beispiel für rem.

Nun können wir auch die Schriftgröße für einen größeren Bildschirm einstellen.

html {
  font-size: 16px; /* d.h. 1rem */
}

.test-col h1 {
  font-size: 2rem; /* d.h. 32px */
}

.test-col p {
  font-size: 1rem; /* d.h. 16px */
}

Wenn wir die Schriftgröße von <h1> & <p> in Mobile & Tablet ändern wollen, dann ändern wir die Schriftgröße des Root-Elements <html>.

@media only screen and (min-width:768px) and (max-width:991px)
{
  html {
    font-size: 14px; /* d.h. 1rem in für Tablet-Bildschirm*/
  } 
}

now the font-size of <h1> & <p> works like this in tablet
.test-col h1 {
  font-size: 2rem; /* d.h. 28px */
}

.test-col p {
  font-size: 1rem; /* d.h. 14px */
}

 @media only screen and (max-width:767px) {
html {
    font-size: 13px; /* d.h. 1rem in für Mobile-Bildschirm*/
  } 
}

now the font-size of <h1> & <p> works like this in mobile

.test-col h1 {
  font-size: 2rem; /* d.h. 26px */
}

.test-col p {
  font-size: 1rem; /* d.h. 13px */
}

Was ist Em?

Em ist eine relativ flexible und skalierbare Einheit der Typografie. Sie entspricht der für das Elternelement angegebenen Schriftgröße. Ihr Browser übersetzt em in Pixel. Dies kann sich als ein schwieriger Teil herausstellen.

Der genaue Wert wird durch die Schriftgröße des Elternelements bestimmt. Es wird kompliziert, wenn wir anfangen, Elemente tief zu verschachteln. In einem solchen Fall müssen wir alle verfügbaren Werte multiplizieren, um den tatsächlichen Wert des Kindelements zu bestimmen.

Nehmen wir an, wir haben ein <div>-Element. Innerhalb des <div> haben wir ein <h1>-Tag und einen Absatz <p>.
Wenn wir die Schriftgröße:16px des Elternelements <div> setzen.

div {
  font-size:16px;
}

Dann haben wir die Schriftgröße von <h1> als 2em. Das bedeutet, dass die Schriftgröße des <h1>-Elements relativ zu seinem Elternelement <div> ist.

 h1 {
   font-size:2em;   /*Standard-Schriftgröße des Elternelements ist 16px*/
 }

p {
   font-size:1em  /* Standard-Schriftgröße des Elternelements ist 16px */
}

Wenn wir die <h1>-Schriftgröße in em gleich 30px setzen wollen, dann können wir die Schriftgröße in em wie folgt berechnen: 30px/16px=1.875em.

Was sind die Verwendungsmöglichkeiten von Em?

Das Hauptproblem ist, dass em relativ zur Schriftgröße seines Elternelements ist. Wenn wir die Schriftgröße eines Elements ändern wollen, dann müssen wir die Schriftgröße seines Elternelements ändern.

Durch die Verwendung von em können wir Komponenten auf der Seite erstellen, die automatisch reagieren, wenn sich die Schriftgröße ändert.

Nehmen wir an, wir wollen die Schriftgröße von <h1> in Mobile oder in Tablet ändern,

div {
    font-size:16px;
    @media only screen and (max-width:767px) {
        font-size: 14px;
     }

    h1 {
      font-size: 1em;
       @media only screen and (max-width:767px) {
          font-size: 1em;  /* d.h. 14px */
        }
    }
}

Was ist Pixel?

Pixel ist eine absolute und feste Einheit in CSS. Obwohl die Größe eines Pixels nicht immer gleich ist, bleiben die Schriftgröße, der Rand und der Abstand in Pixel (px) für alle Bildschirme gleich.

Pixel sind leicht zu übersetzen. Wenn wir zum Beispiel die Schriftgröße 24px für ein <h1>-Element festlegen, dann ist sie für alle Bildschirme und Geräte immer 24px.

h1{
  font-size: 24px;
}

p{
  font-size: 18px;
}

Und wenn wir die Schriftgröße für ein <p>-Element auf 18px setzen, dann wären es für alle Bildschirme und Geräte immer 24px.

Wir verwenden die Pixel als absolute Einheit, und sie bleiben für alle Bildschirme gleich.

Abhängig vom Projekt, dem Bedarf und dem Entwickler können Sie rem, em oder Pixel verwenden. Das Wichtigste, was es zu berücksichtigen gilt, ist jedoch, für wen die Website erstellt wird. Sobald Sie mit Ihren Bedürfnissen und dem Endziel vertraut sind, ist es einfach zu entscheiden, worauf Sie sich konzentrieren wollen.