Wenn Sie schon einmal mit CSS herumexperimentiert haben, haben Sie wahrscheinlich schon vor einem Design-Mockup gesessen und sich gefragt: „Sollte ich hier Pixel verwenden oder sollte ich daraus einen rem-Wert machen?“
Wenn Sie es mit einer Full-HD-Bildschirmbreite zu tun haben – speziell 1920px – und diese in rem umrechnen möchten, sind Sie hier genau richtig. Wir werden die genaue Mathematik aufschlüsseln, mit einer kinderleichten Analogie erklären, warum es funktioniert, und Sie im Handumdrehen zurück zum Programmieren bringen.
Die schnelle Antwort: 1920px in rem
Kommen wir direkt zur Sache. Angenommen, Ihre Website verwendet die standardmäßige Standard-Schriftgröße des Browsers von 16px, dann entsprechen 1920px genau 120rem.
Wie sind wir darauf gekommen? Es ist eine einfache Divisionsaufgabe:
1920 ÷ 16 = 120
Das ist schon alles. Aber wenn Sie verstehen möchten, warum wir durch 16 teilen, warum wir uns überhaupt mit rem beschäftigen oder wie Sie diese Rechenaufgabe komplett vermeiden können, bleiben Sie noch eine Minute dran.
(Profi-Tipp: Wenn Sie es leid sind, diese Zahlen im Kopf auszurechnen, setzen Sie sich einfach ein Lesezeichen für einen praktischen Pixel-in-rem-Konverter, der die schwere Arbeit für Sie erledigt).
Pixel vs. Rem: Die „Back“-Analogie
Um zu verstehen, warum Webentwickler so besessen von rem sind, hilft es, sich vom Computer zu entfernen und in die Küche zu gehen.
Stellen Sie sich Pixel (px) wie eine starre Backform aus Metall vor. Wenn Sie eine 9-Zoll-Kuchenform haben, wird sie immer 9 Zoll groß sein. Es spielt keine Rolle, ob Sie einen Kuchen für zwei oder zwanzig Personen backen; die Form ändert ihre Größe nicht. Im Webdesign ist ein Pixel eine strikte, absolute Einheit. Wenn Sie eine Box auf 1920px einstellen, bleibt sie bei 1920px, selbst wenn der Benutzer sie auf einem winzigen Smartphone betrachtet oder eine Sehschwäche hat und alles vergrößert werden muss.
Rems hingegen sind wie ein flexibles Rezept. Stellen Sie sich ein Pfannkuchenrezept vor, das „1 Tasse Mehl pro Person“ verlangt. Wenn eine Person isst, verwenden Sie 1 Tasse. Wenn vier Personen essen, skaliert es automatisch auf 4 Tassen.
In CSS steht rem für „root em“. Es schaut auf das Root-Element (die Basis-Schriftgröße, die Ihr Benutzer in seinem Browser eingestellt hat) und skaliert von dort aus alles proportional.
Die magische Zahl: 16
Standardmäßig stellt so gut wie jeder Webbrowser die Root-Schriftgröße auf 16px ein.
Wenn Sie CSS also anweisen, einen Container 1rem breit zu machen, sagt der Browser: „Okay, die Basisgröße ist 16px. Machen wir diesen Container 16px breit.“
Wenn Sie einen Full-HD-Wrapper möchten, der 1920 Pixel breit ist, fragen Sie sich einfach: „Wie oft passt 16 in 1920?“
1920 ÷ 16 = 120
Sie schreiben max-width: 120rem; in Ihr Stylesheet und schon kann es losgehen. Und hey, wenn Sie jemals rückwärts rechnen müssen (z. B. wenn Sie den Code eines anderen lesen und sich fragen, was zum Teufel 120rem in normalen Bildschirmwerten bedeutet), können Sie jederzeit einen rem-in-Pixel-Konverter verwenden, um es zurückzurechnen.
Warum sollte Sie das kümmern? (Der Blickwinkel der Barrierefreiheit)
Sie denken vielleicht: „Mathe ist nervig. Warum tippe ich nicht einfach 1920px ein und belasse es dabei?“
Das könnten Sie absolut tun. Aber die Entwicklung mit rem macht Ihre Website unglaublich benutzerfreundlich für Menschen, die heranzoomen müssen. Wenn ein sehbehinderter Benutzer seine Standard-Browser-Schriftgröße von 16px auf 24px ändert, bleibt eine vollständig mit px erstellte Website stur bei derselben Größe, was oft dazu führt, dass Text überlappt oder unleserlich wird.
Wenn Sie Ihre Website mit rem gebaut haben, atmet das gesamte Layout und skaliert perfekt mit, wobei die Einstellungen des Benutzers respektiert werden. Es ist im Grunde wie Magie und lässt Sie wie einen erstklassigen Entwickler aussehen, dem Barrierefreiheit wirklich am Herzen liegt.
Ihr schneller CSS-Spickzettel
Wenn Sie nicht jedes Mal den Taschenrechner herausholen möchten, wenn Sie CSS schreiben, finden Sie hier eine schnelle Übersicht basierend auf dem Standard-Root von 16px.
Die Formel: Ziel-Pixelgröße ÷ 16 = rem-Wert
- 16px = 1rem (Die Basis)
- 24px = 1.5rem
- 32px = 2rem (Ideal für Standard-Überschriften)
- 48px = 3rem
- 64px = 4rem
- 768px = 48rem (Gängiger Tablet-Breakpoint)
- 1024px = 64rem (Standard-Desktop-Breakpoint)
- 1440px = 90rem (Großer Desktop-Bildschirm)
- 1920px = 120rem (Full-HD-Monitor)
Wenn Sie das nächste Mal vor einem 1920px-Design sitzen, denken Sie einfach an das flexible Rezept. Teilen Sie durch 16, fügen Sie 120rem ein und bauen Sie weiterhin großartige Dinge!