Rem
Webflow ist standardmäßig auf px-Einheiten eingestellt. Wenn wir "10" in ein beliebiges Designer-Eingabefeld eingeben und "Enter" drücken, wird "10px" eingestellt.
Client-First verwendet rem, das wir im Dropdown-Menü der Einheit auswählen können.
Was ist rem?
Rem steht für "root em".
- Rem ist eine relative Maßeinheit, die auf der font-size des Root Elements (meistens html) basiert.
- Das Root Element ist html.
- Rem ist relativ zur html Schriftgröße.
- Die meisten Größen, die im Client-First angewandt werden, sind in rem.
Vererbung der Browser-Schriftgröße
Bei Client-First erben wir die html font-size vom Browser.
Die Browser verwenden zunächst 16px als html font-size.
Die Umwandlung von 1rem = 16px ist die Standardeinstellung des Browsers.
Auf der Grundlage der vom Client-First genehmigten Größen können wir die px-Werte schnell in rem umwandeln. Die von Client-First genehmigten rem-Werte sind zum Beispiel 0,5, 1, 1,5, 2, 2,5, 3 und so weiter.
Rem und Client-First sind ein starkes Paar, wenn es darum geht, die besten Praktiken für Barrierefreiheit bei der Schriftgröße im Browser zu befolgen.
Die Mathematik
Alle 16px sind 1rem, wenn die font-size des Browsers in den Browsereinstellungen auf "Standard" eingestellt ist.
Wenn wir unser Webflow-Projekt erstellen, verwenden wir immer 16px als Basiswert für die Berechnung von rem.
Jede rem Umrechnung ist ein Vielfaches von 16.
Um den px-Wert in rem umzurechnen, teile diesen Wert durch 16.
64px / 16px = 4rem
Um den rem-Wert in px umzurechnen, multipliziere diesen Wert mit 16.
2rem x 16px = 32px
Der Einfachheit halber empfehlen wir, leicht lesbare rem-Werte wie 1, 2, 2,5, 3, 4, 5 zu verwenden.
Wir wollen die häufige Verwendung von langen Zahlenwerten wie 8,4375rem vermeiden. Diese Werte sind schwerer zu merken und verlangsamen unseren Arbeitsablauf.
Berechnungen im Webflow Designer
In den meisten Eingabefeldern des Webflow Designers können wir rem nativ in Webflow berechnen.
In der Eingabe für die Breite (Width) im Designer gibst du "100/16rem" ein, drückst "Enter" und siehst, wie der rem-Wert berechnet wird.
Wir können jede Zahl durch 16 teilen, um ihren rem-Wert im Webflow Designer zu erhalten.
Vorteile der Barrierefreiheit
Browser-Schriftgrößeneinstellungen
Browser verwenden 16px als ihre standardmäßige html font-size – und die Browser erlauben es dem Nutzer, die standardmäßige Schriftgröße zu verändern. Die Nutzer können ihre Einstellungen aktualisieren und die Schriftgröße ändern.
Die Einstellung der Schriftgröße im Browser ist ein wichtiges Thema für die Barrierefreiheit. Wenn Nutzer/innen ihre Browser-Schriftart aktualisieren, sollte sich der Inhalt der Website an die Änderung anpassen. Das Client-First Rem-System passt sich an die Schriftgrößeneinstellungen des Browsers der Nutzer/innen an.
Wenn wir mit anderen Maßeinheiten wie px und vw arbeiten, ignorieren wir die Voreinstellungen des Nutzers, um seine Schriftgröße im Browser zu verändern.
Browser-Zoom
Rem respektiert auch die Steuerung des Browser-Zooms des Nutzers. Wenn ein Nutzer die Seite vergrößert oder verkleinert, werden das Layout und der Inhalt von rem entsprechend mit gezoomt.
Wenn wir vw oder vh Einheiten verwenden, funktioniert der Browser-Zoom nicht.
vw basiert auf der Breite des Browserfensters (oder der Höhe im Fall von vh). Nur eine Änderung des Browserfensters wirkt sich auf die in diesen Einheiten eingestellten Größen aus.
Client-First folgt den besten Praktiken für Barrierefreiheit. Die Entscheidung, in rem zu arbeiten, steht in direktem Zusammenhang mit diesem Vorteil für die Barrierefreiheit und die Benutzerfreundlichkeit.
Erfahre mehr über Barrierefreiheit mit rem in unserem Artikel Wizardry vs. Client-First Vergleich. Dies ist ein technischer Überblick über die Vorteile von rem als barrierefreie Maßeinheit.
Empfohlene px zu rem Werte
Im Folgenden findest du eine Liste aller empfohlenen rem-Werte mit ihren umgerechneten px-Maßen.
Diese vom Client-First festgelegten Werte sind eine Empfehlung und keine strikte Vorschrift.
Diese Liste der Größen ist interaktiv. Aktualisiere die Werte über das Menü.
{ Calculator }
Client-First schlägt vor, mit diesen Werten zu arbeiten.
Es gibt 3 Ausnahmen von der Verwendung der oben genannten Werte.
1. Typografie
Die Verwendung von 14px als Schriftgröße ist üblich und wird empfohlen, wenn 16px zu groß ist. Eine Schriftgröße von 12px ist für die Typografie oft zu klein.
14px = 0.875rem
2. 2px Spacing
Verwende 2px für kleines Spacing (Abstände). Wenn Spacing von weniger als 4px benötigt wird, verwende 2px.
2px = 0.125rem
3. 1px ist 1px
Wenn du 1px verwendest, zum Beispiel als border, verwende 1px als Wert.
Wir raten davon ab, 1px-Werte in rem zu konvertieren.
Retina-Geräte haben andere Skalierungsregeln als Nicht-Retina-Geräte. Wenn du 1px verwendest, wird auf jedem Gerät genau 1px Linie erzeugt, ohne dass die Retina-Skalierung gestört wird.
1px = 1px
Finsweet Extension px zu rem Migrationstool
Die Finsweet Extension bietet ein Tool, mit dem du Projekte, die in px erstellt wurden, in rem konvertieren kannst.
Es wandelt jeden Wert im Projekt von px in den berechneten rem-Wert um.
Auf der Registerkarte Client-First der Finsweet Extension verwaltet das Candy "PX to REM Migrator" die Migration der Größeneinheiten.