Softonic

EM zu REM Konverter

Schritt 1 / 2 rem
Ergebnisse

Ein Designer sendet Ihnen Figma-Spezifikationen in Pixeln, der Code verwendet rem, und die Hälfte der Komponenten verwendet em an Stellen, wo sie sich basierend auf der Schriftgröße des übergeordneten Elements verschieben. Dieser Konverter berechnet die px- und rem-Äquivalente eines beliebigen em-Werts bei jeder Wurzel-Schriftgröße, sodass Sie die richtige Zahl in die CSS-Datei kopieren können, ohne jedes Mal im Kopf neu zu berechnen.

So konvertieren Sie em, rem und Pixel

  1. 1

    Setzen Sie die Basis-Schriftgröße

    Normalerweise 16px, die Standardgröße des Browsers. Einige Designsysteme verwenden 14px oder 18px als Wurzel.

  2. 2

    Für em, setzen Sie die Schriftgröße des übergeordneten Elements

    em ist relativ zum übergeordneten Element. Wenn das übergeordnete Element 20px hat, entspricht 1em 20px.

  3. 3

    Geben Sie einen Wert ein

    In em; die px- und rem-Äquivalente aktualisieren sich automatisch.

  4. 4

    Lesen Sie die Konversion

    px-, em- und rem-Werte mit gerundeten und genauen Dezimalzahlen angezeigt.

Die Formeln

rem ist immer relativ zum Wurzel-Element (<html>):

px = rem * root_font_size rem = px / root_font_size

em ist relativ zum übergeordneten Element:

px = em * parent_font_size em = px / parent_font_size

Konversionen bei 16px Wurzel

Pixel rem em (bei 16px übergeordnet)
10 0.625 0.625
12 0.75 0.75
14 0.875 0.875
16 1 1
18 1.125 1.125
20 1.25 1.25
24 1.5 1.5
32 2 2
48 3 3
64 4 4

Wann man was verwenden sollte

  • px: Ränder, feine Details, exakte Kontrolle. 1px Box-Schatten, 1px Rand.
  • rem: Abstände, Polsterungen, Typografie, die sich mit den Schriftpräferenzen des Benutzers skalieren sollte.
  • em: komponentenlokale Abstände, die sich an ihrer eigenen Schriftgröße anpassen (Schaltflächen, Abzeichen).
  • % und vw/vh: container-relativ und viewport-relativ, ein separates Thema.

Der 62.5%-Trick

Einige Codebasen setzen html { font-size: 62.5%; }, was 1rem = 10px ergibt. Das macht die rem-Berechnung einfach (24px = 2.4rem) auf Kosten der Brechung der Schriftgrößenpräferenzen des Browsers für Benutzer, die den Text vergrößern. Moderne Praktiken vermeiden diesen Hack; verwenden Sie 16px Wurzel und tolerieren Sie Dezimalzahlen.

Die Vererbungsfalle von em

em vererbt durch die Kaskade. Wenn ein übergeordnetes Element eine Schriftgröße von 1.2em relativ zu seinem eigenen übergeordneten Element hat und darin haben Sie eine Polsterung von 1em, beträgt die Polsterung 1.2 * 1.2 = 1.44 * Wurzel. Verschachtelte ems kumulieren, was überraschende Ergebnisse liefern kann. Rem vermeidet dies, da es immer gegen <html> aufgelöst wird.

Beispiel für eine Typografie-Skala

Eine gängige modulare Typografie-Skala im Verhältnis 1.25:

Ebene rem px (bei 16 Wurzel)
Beschriftung 0.75 12
Körper 1 16
Körper+ 1.125 18
H4 1.25 20
H3 1.5625 25
H2 1.953 ~31
H1 2.441 ~39
Blickfang 3.052 ~49

Die Verwendung von rem bedeutet, dass jede Ebene proportional skaliert, wenn ein Benutzer die Schriftgröße seines Browsers aus Gründen der Barrierefreiheit erhöht.

Respektieren der Benutzerpräferenzen

Hard-Coding von px über ein Stylesheet hinweg bricht Benutzer, die den Text aus Sichtgründen vergrößern. rem respektiert diese Präferenzen, da es gegen die Wurzelgröße aufgelöst wird, die der Benutzer ändern kann. Dies ist der Hauptgrund, warum Styleguides rem für Typografie und Abstände empfehlen.

Häufig gestellte Fragen

Verwenden Sie rem für Typografie, Abstände und Layout-Größen. Verwenden Sie em für komponenteninterne Größen, die sich mit der eigenen Schriftgröße der Komponente skalieren sollten (Schaltflächen, Symbole innerhalb von Text). Verwenden Sie px nur für feine Details, die nicht skaliert werden dürfen.

Benutzer können die Standard-Schriftgröße ihres Browsers ändern. Chrome hat standardmäßig 16px; wenn der Benutzer 18px eingestellt hat, sind alle Ihre rems 12.5 Prozent größer. Designer, die von einer festen 16px Wurzel ausgehen, übersehen dies oft; rem respektiert die Wahl, was der Punkt ist.

Die Abstands-Skala von Tailwind verwendet rem. text-base ist 1rem = 16px standardmäßig, text-lg ist 1.125rem. Die Skala ist konsistent und respektiert die Wurzel-Schriftgröße sofort.

Nein. Die eingegebenen Zahlen werden nur zur Berechnung der Konversion verwendet; nichts wird gespeichert.

Verwandte Tools

ASCII-Tabelle Referenz

Vollständige ASCII-Tabelle von 0 bis 127 mit Dezimal-, Hex-, Oktal-, Binär- und numerischer HTML-Zeichenreferenz für jedes Zeichen, einschließlich Steuerzeichen wie NUL, LF und DEL.

HTML-Zeichenreferenz

Durchsuchbare Liste von HTML-Entitäten, ihren benannten und numerischen Codes sowie eine Ein-Klick-Kopie für Sonderzeichen und Symbole.

Referenz für Tastenkombinationen

Durchsuchen Sie dokumentierte Standardkürzel für VS Code, Chrome und Bash mit GNU Readline unter macOS, Windows und Linux.

Zufallsbuchstaben-Generator

Erzeugen Sie zufällige A-Z-Buchstaben. Wählen Sie Anzahl, Großschreibung, Kleinschreibung oder gemischte Schreibweise für Spiele, Aufgaben und Unterricht.

Telefonnummern prüfen

Prüfen Sie die Struktur von Telefonnummern nach Land und zeigen Sie Region, Typ sowie E.164-, internationale, nationale und RFC-3966-Formate an.

Zufälliger Farbgenerator

Erzeuge 1 bis 50 zufällige HEX-Farben mit Farbfeldern zum Prüfen, Kopieren und Verwenden in CSS, Tests oder Palettenideen.

Tool in anderen Sprachen verfügbar