PX zu REM Konverter
Konvertieren Sie CSS-Pixelwerte in REM-Einheiten (root em) und umgekehrt. Unterstützt benutzerdefinierte Schrift-Grundgröße, Stapelkonvertierung und Tailwind CSS Klassensuche.
px
Conversion Table (base: 16px)
| px | rem |
|---|---|
| 8 | 0.5rem |
| 10 | 0.625rem |
| 12 | 0.75rem |
| 14 | 0.875rem |
| 16 | 1rem |
| 18 | 1.125rem |
| 20 | 1.25rem |
| 24 | 1.5rem |
| 32 | 2rem |
| 48 | 3rem |
| 64 | 4rem |
| 96 | 6rem |
| 128 | 8rem |
| Tailwind | rem |
|---|---|
| text-xs | 0.75rem |
| text-sm | 0.875rem |
| text-base | 1rem |
| text-lg | 1.125rem |
| text-xl | 1.25rem |
| text-2xl | 1.5rem |
| text-3xl | 1.875rem |
| text-4xl | 2.25rem |
| text-5xl | 3rem |
| text-6xl | 3.75rem |
| p-1 | 0.25rem |
| p-2 | 0.5rem |
| p-3 | 0.75rem |
| p-4 | 1rem |
| p-5 | 1.25rem |
| p-6 | 1.5rem |
| p-8 | 2rem |
| p-10 | 2.5rem |
| p-12 | 3rem |
So verwenden Sie PX zu REM Konverter
- 1Geben Sie einen Pixel- oder rem-Wert ein, um ihn umzuwandeln.
- 2Legen Sie Ihre Schrift-Grundgröße fest (Standard 16px).
- 3Zeigen Sie das Umwandlungsergebnis sofort an.
- 4Sehen Sie die vollständige Umwandlungstabelle für gängige Größen.
ZenovayAnalytics
Sehen Sie, wer gerade auf Ihrer Seite ist.
- Besucher-Tracking in Echtzeit
- Datenschutz zuerst, kein Cookie-Banner
- In zwei Minuten eingerichtet
Verwandte Tools
JSON-Formatter und Validator
Formatieren, validieren und verschönern Sie JSON-Daten mit Syntaxhervorhebung und Fehlererkennung.JWT-Decoder
Dekodieren und inspizieren Sie JWT-Token. Zeigen Sie Header, Payload und überprüfen Sie Signaturen.Base64 Encode/Decode
Kodieren Sie Text in Base64 oder dekodieren Sie Base64 zurück in Text. Unterstützt UTF-8 und Binärdaten.URL Codierungstool
Codieren oder decodieren Sie URL-Komponenten. Verarbeiten Sie Sonderzeichen, Abfragezeichenfolgen und vollständige URLs.Häufig gestellte Fragen
Was ist der Unterschied zwischen px und rem?▾
px (Pixel) ist eine absolute Einheit – 16px sind immer 16px, unabhängig von Benutzereinstellungen. rem (Root Em) ist relativ zur Schriftgröße des Root-Elements (HTML-Element). Die standardmäßige Browser-Root-Schriftgröße beträgt 16px, daher 1rem = 16px standardmäßig. Wenn ein Benutzer ihre Browser-Schriftgröße ändert (zur Barrierefreiheit), werden rem-Einheiten entsprechend skaliert, aber px-Einheiten nicht. Dies macht rem für Schriftgrößen und Abstände in barrierefreien Designs vorzuziehen.
Warum rem statt px verwenden?▾
rem respektiert Schriftgröße-Voreinstellungen des Benutzers in den Browser-Barrierefreiheitseinstellungen. Benutzer mit Sehbehinderungen können die Basisschriftgröße auf 20px oder 24px erhöhen – rem-basierte Layouts skalieren korrekt, px-basierte Layouts nicht. rem macht auch die Skalierung einfacher: Ändern Sie die Root-Schriftgröße und alle rem-Werte skalieren proportional. WCAG 2.1 Erfolgskriterium 1.4.4 (Text vergrößern) empfiehlt skalierbare Einheiten. Tailwind CSS verwendet rem für alle Größen-Dienstprogramme.
Wie handhabt Tailwind CSS rem?▾
Tailwind verwendet standardmäßig 1rem = 16px. Die 4px-Basis-Einheit: text-xs (12px = 0,75rem), text-sm (14px = 0,875rem), text-base (16px = 1rem), text-lg (18px = 1,125rem), text-xl (20px = 1,25rem), text-2xl (24px = 1,5rem). Abstände: p-4 = 1rem = 16px, p-8 = 2rem = 32px. Um die Basis zu ändern: set html { font-size: 10px } und dann 1rem = 10px (1rem = 10px machen ist ein häufiger Trick: 16px = 1,6rem).
Was ist der 62,5%-Trick?▾
Das Setzen von html { font-size: 62,5% } macht die Root-Schriftgröße 62,5% von 16px = 10px. Dies bedeutet 1rem = 10px, was Kopfrechnen vereinfacht: 16px = 1,6rem, 24px = 2,4rem, 100px = 10rem. Dies macht rem genauso einfach zu verwenden wie px. Nachteil: Sie müssen sich erinnern, body { font-size: 1,6rem } zu setzen (16px für Body-Text), da html jetzt 10px ist. Einige Teams vermeiden dies, weil es die Schriftgrößen-Voreinstellungen des Benutzers überschreibt (62,5% der vom Benutzer gewählten Größe, nicht 16px).
Wann sollte ich em statt rem verwenden?▾
em ist relativ zur Schriftgröße des übergeordneten Elements (nicht root). Verwenden Sie em für: Komponenten-Skalierung (Button-Innenabstand skaliert mit der Schriftgröße des Buttons), Media Queries (em-basierte Queries respektieren Benutzer-Schriftgröße-Änderungen besser als px-Queries), letter-spacing und line-height relativ zur Schriftgröße des aktuellen Elements. Vermeiden Sie em für Layout-Abstände, bei denen verschachtelte Komponenten zu unerwarteter zusammengesetzter Skalierung führen könnten. rem für globale Skalierung, em für komponentenrelative Werte.