Einheiten

Die Schrift einer Navigation mit Untermenüs wird mit jeder Ebene kleiner, obwohl überall dieselbe Regel steht. Schuld ist die Einheit. Sie entscheidet, worauf sich ein Wert bezieht und was passiert, wenn sich am Drumherum etwas ändert.

01 / 04px, em und rem

px ist absolut. 16px sind 16px, egal wo das Element steht und was der Nutzer eingestellt hat. Das ist praktisch für Dinge, die sich wirklich nicht ändern sollen, allen voran Rahmenbreiten.

em bezieht sich auf die Schriftgröße des Elements selbst. Die wird aber geerbt, und so multipliziert sich der Faktor in jeder Verschachtelungsebene neu. Die wichtigste Ausnahme steht in font-size selbst. Dort zählt die Schriftgröße des Elternteils, denn die eigene wird gerade erst ausgerechnet.

rem bezieht sich auf die Schriftgröße des Wurzelelements, also auf html. Die ist überall dieselbe, also gibt es nichts zu multiplizieren.

<p>Mit em:</p>
<ul class="mit-em">
  <li>Erste Ebene
    <ul>
      <li>Zweite Ebene
        <ul>
          <li>Dritte Ebene</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<p>Mit rem:</p>
<ul class="mit-rem">
  <li>Erste Ebene
    <ul>
      <li>Zweite Ebene
        <ul>
          <li>Dritte Ebene</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

/* em bezieht sich auf die Schriftgröße des Elements selbst.
   In jeder Ebene wird deshalb erneut multipliziert:
   0,9 dann 0,81 dann 0,73. */
.mit-em li {
  font-size: 0.9em;
}

/* rem bezieht sich immer auf die Wurzel.
   Alle drei Ebenen sind exakt gleich groß. */
.mit-rem li {
  font-size: 0.9rem;
}

Die obere Liste schrumpft mit jeder Ebene weiter, die untere bleibt gleich. Bei drei Ebenen ist das ein Unterschied von 0,73 zu 0,9. In einer echten Navigation mit Untermenüs fällt das auf.

Deshalb ist rem die Standardwahl für Schriftgrößen und Abstände. em bleibt nützlich, wenn etwas mit der Schrift mitwachsen soll, etwa der Innenabstand eines Buttons, der bei größerer Beschriftung auch mehr Luft bekommen soll.

Für rem spricht noch etwas. Stellst du im Browser die Schriftgröße hoch, ändert sich damit die Wurzelgröße, und die ganze Seite wächst mit. Bei px passiert nichts.

02 / 04Prozent bezieht sich auf Verschiedenes

Prozentangaben sind die trickreichste Einheit, weil ihr Bezug von der Eigenschaft abhängt.

Bei width ist es die Breite des Elternteils, bei font-size dessen Schriftgröße, bei line-height die eigene Schriftgröße. Und bei padding und margin ist es immer die Breite des Elternteils, auch oben und unten.

<div class="huelle">
  <div class="kasten">Der Innenabstand oben ist 10 Prozent der Breite der Hülle, nicht ihrer Höhe.</div>
</div>

.huelle {
  width: 400px;
  background-color: #fef9c3;
}

/* Die 10 Prozent oben und unten sind 40px, weil die Hülle
   400px BREIT ist. Setz die Breite auf 200px und der
   senkrechte Abstand halbiert sich mit. */
.kasten {
  padding: 10% 0;
  background-color: #dbeafe;
}

Das wirkt wie ein Fehler, ist aber praktisch. So lassen sich Kästen bauen, deren Seitenverhältnis gleich bleibt. Für den Alltag heißt es vor allem, dass man senkrechte Abstände lieber nicht in Prozent angibt.

03 / 04Der Bildschirm als Maß

vw und vh sind ein Prozent der Breite und der Höhe des Viewports, also des Bereichs im Fenster, in dem die Seite zu sehen ist. Mit dem Elternteil haben sie nichts zu tun.

<div class="spalte">
  <div class="breit">60vw: 60 Prozent des Viewports</div>
  <div class="ganz">100%: die volle Breite der Spalte</div>
</div>

.spalte {
  width: 120px;
  border: 2px solid #d4d4d8;
}

/* vw kennt nur den Viewport und nicht die Spalte,
   in der das Element gerade steckt. Deshalb ragt der
   blaue Kasten aus der Spalte heraus, egal wie schmal
   die Seite gerade ist. */
.breit {
  width: 60vw;
  background-color: #dbeafe;
}

/* Prozent fragt den Elternteil. */
.ganz {
  width: 100%;
  background-color: #fef9c3;
}

Der blaue Kasten ragt aus der schmalen Spalte heraus, weil 60vw vom Viewport ausgeht und nicht vom Elternteil. Der gelbe darunter bleibt drin, denn Prozent bezieht sich auf die Spalte.

Auf dem Telefon hat vh eine Tücke. Die Adressleiste blendet sich beim Scrollen ein und aus, und damit ändert sich die Höhe, die wirklich zu sehen ist. 100vh rechnet mit der größeren Variante. Am Anfang ragt der Inhalt deshalb unter die Leiste.

Dafür gibt es dvh, die dynamische Höhe des Viewports. Sie rechnet mit dem, was gerade wirklich sichtbar ist. Daneben stehen svh für die kleine und lvh für die große Variante, falls du bewusst eine der beiden willst.

Für Zeilenlängen gibt es außerdem ch, die Breite der Ziffer Null in der aktuellen Schrift. max-width: 65ch ist die ehrlichste Art zu sagen „ungefähr 65 Zeichen pro Zeile“, und das ist genau der Bereich, in dem sich ein längerer Text bequem lesen lässt.

04 / 04Welche Einheit wofür

In meinen eigenen Dateien halte ich mich an diese Einteilung.

• Schriftgrößen und Abstände in rem, weil sie mit der Browsereinstellung skalieren und sich nicht multiplizieren. In den Aufgaben und Beispielen dieses Kurses stehen sie trotzdem in px. Deren Zahlen stehen ja auch im Text und in der Prüfliste, und mit rem bekäme jemand mit größer eingestellter Schrift andere zu sehen.
• Rahmen in px, denn ein Haarstrich soll ein Haarstrich bleiben.
• Breiten im Layout in % oder fr, damit sie sich am vorhandenen Platz orientieren. fr kommt in Abschnitt 10.
• Zeilenlängen in ch, weil die Frage dort wirklich nach Zeichen lautet.

Wie man eine Größe baut, die zwischen zwei Grenzen mit dem Viewport mitwächst, kommt in Lektion 5.3. In der Aufgabe geht es erst einmal um die Wurzel, an der die Abstände einer Karte hängen sollen.