Verwenden Sie `rem` für globale Größenangaben; Verwenden Sie `em` für lokale Größenangaben

Richard Rutters Anleitung zum Einstellen der Schriftgröße eines Elements ist interessant: Er argumentiert, dass wir je nach Beziehung zu anderen Elementen auf der Seite sowohl em als auch rem Einheiten verwenden sollten

Betrachten Sie das Beispiel eines Pull-Quotes, das zwei kurze Absätze enthält. Der Abstand zwischen den Absätzen hängt von der Größe des Absatztextes ab, daher könnten Sie diesen Abstand theoretisch in Rem oder Em festlegen. Sollten Sie während Ihres Designprozesses entscheiden, dass der Pull-Quote etwas größer gesetzt werden soll, muss auch der Abstand zwischen den Absätzen vergrößert werden. Daher steht der Absatzabstand in direktem Zusammenhang mit der Größe des Absatztextes und sollte daher als lokale Größenangabe innerhalb einer Komponente betrachtet werden. Daher sollten Sie in diesem Fall Em verwenden.

Dies ergänzt die Methode, die Chris vor ein paar Jahren beschrieben hat

Hier ist also meine Idee: Sie behalten weiterhin px-Größenanpassungen auf Dokumentenebene bei, damit Sie einfache/effiziente umfassende Größenänderungen vornehmen können. Aber dann hat jedes Modul auf der Seite eine Schriftgröße, die in rem angegeben ist. Tatsächliche Textelemente (h1, h2, p, li, was auch immer), wenn Sie sie überhaupt dimensionieren, werden in em dimensioniert und werden somit relativ zum Modul.

Aufgeschlüsselt: Zuerst setzen wir die font-size des Dokumentenelements mit px

html {
  font-size: 16px;
    
  @media screen and (min-width: 900px) {
    font-size: 18px;
  }
    
  @media screen and (min-width: 1200px) {
    font-size: 20px;
  }
}

Als Nächstes stylen wir alle unsere kleinen Textelemente, wie Absätze, Überschriften oder Blockquotes, mit ems. Das liegt daran, dass sie eine Beziehung zueinander haben

h2 { 
  font-size: 2em;
}

pre {
  font-size: 0.8em;
}

Und schließlich stylen wir die Module, in denen diese Textteile sitzen, mit rems, damit wir alle Texte darin leicht anpassen können

.module {
  font-size: 1.1rem;
}

.another-module {
  font-size: 1.3rem;
}

...was sich in der Praxis ungefähr so auswirkt

Siehe den Pen Em AND Rem von Chris Coyier (@chriscoyier) auf CodePen.

Was erreichen wir damit? Warum können wir nicht einfach bei rem oder em bleiben, um die Dinge einfach zu halten? Nun, mit dieser Methode wird jedes Modul sofort abgegrenzt und lässt sich leichter für die Zukunft stylen. Aber auch wir können die font-size jedes Moduls schnell anpassen, ohne große Teile der Codebasis ändern zu müssen. Wenn wir feststellen, dass die font-size der gesamten Website erhöht werden muss, müssen wir nur einen einzigen Wert ändern.

em und rem Werte sind für zwei verschiedene Aufgaben nützlich, und wenn wir sie so nutzen, wie sie konzipiert wurden, kann unsere Arbeit etwas wartungsfreundlicher und flexibler werden.