Em/Px-Konverter
Konvertieren Sie zwischen CSS-Einheiten: px, em, rem, pt und %. Stellen Sie Ihre Basisschriftgröße ein und sehen Sie alle Konvertierungen sofort mit einer Schnellreferenztabelle.
Base Font Size
px(browser default: 16px)
Convert a Value
px
16em
1rem
1pt
12%
100Text Preview
The quick brown fox
Previewing at 16px
Quick Reference TableBase: 16px
| px | em | rem | pt | % |
|---|---|---|---|---|
| 8 | 0.5 | 0.5 | 6 | 50% |
| 10 | 0.625 | 0.625 | 7.5 | 62.5% |
| 12 | 0.75 | 0.75 | 9 | 75% |
| 14 | 0.875 | 0.875 | 10.5 | 87.5% |
| 16 | 1 | 1 | 12 | 100% |
| 18 | 1.125 | 1.125 | 13.5 | 112.5% |
| 20 | 1.25 | 1.25 | 15 | 125% |
| 24 | 1.5 | 1.5 | 18 | 150% |
| 28 | 1.75 | 1.75 | 21 | 175% |
| 32 | 2 | 2 | 24 | 200% |
| 36 | 2.25 | 2.25 | 27 | 225% |
| 40 | 2.5 | 2.5 | 30 | 250% |
| 48 | 3 | 3 | 36 | 300% |
| 64 | 4 | 4 | 48 | 400% |
| 72 | 4.5 | 4.5 | 54 | 450% |
| 96 | 6 | 6 | 72 | 600% |
All conversions happen entirely in your browser. No data is sent to any server.
So verwenden Sie Em/Px-Konverter
- 1Stellen Sie Ihre Basisschriftgröße ein (Standard 16px).
- 2Geben Sie einen Wert ein und wählen Sie die Eingabeeinheit aus.
- 3Sehen Sie die Konvertierungen zu allen anderen CSS-Einheiten sofort.
- 4Verwenden Sie die Referenztabelle für gängige Schriftgrößen.
ZenovayAnalytics
Machen Sie aus Besuchern Kunden.
- Besucher-Tracking in Echtzeit
- Datenschutz zuerst, kein Cookie-Banner
- In zwei Minuten eingerichtet
Verwandte Tools
Farbkonverter
Konvertieren Sie Farben zwischen HEX, RGB, HSL und CMYK-Formaten. Live-Vorschau mit Farbwähler.Einheitskonverter
Konvertieren Sie zwischen Längen-, Gewichts-, Temperatur-, Flächen-, Volumen-, Geschwindigkeitseinheiten und mehr.Zahlenbasen-Converter
Konvertieren Sie Zahlen zwischen binären, oktalen, dezimalen und hexadezimalen Basen.Unix-Zeitstempel-Konverter
Konvertieren Sie zwischen Unix-Zeitstempeln und lesbaren Datumsangaben. Zeigen Sie ISO 8601, UTC, Ortszeit und relative Zeit an.Häufig gestellte Fragen
Was ist der Unterschied zwischen em, rem und px?▾
px (Pixel) ist eine absolute Einheit basierend auf Bildschirmpixeln. em ist relativ zur Schriftgröße des Überelements. rem ist relativ zur Schriftgröße des Root-Elements (html). Bei einem 16px-Root ist 1rem = 16px. em wird verschachtelt zusammengefasst (1,5em in 1,5em = 2,25× die Root-Größe); rem nicht.
Wann sollte ich jede CSS-Einheit verwenden?▾
Verwenden Sie rem für Schriftgrößen (skaliert mit Benutzereinstellungen). Verwenden Sie em für komponenteninterne Abstände, die mit dem Text der Komponente skalieren sollten. Verwenden Sie px für Ränder, Schatten und Elemente mit fester Größe. Verwenden Sie % für Breiten und Layouts. Verwenden Sie vw/vh für Viewport-relative Größen.
Was ist die Standard-Basisschriftgröße?▾
Browser standardisieren auf 16px für die Root-Schriftgröße. Benutzer können dies in den Browsereinstellungen zur Barrierefreiheit ändern. Deshalb ist 1rem = 16px standardmäßig, und warum die Verwendung von rem-Einheiten Benutzereinstellungen respektiert, während px dies nicht tut.
Wie beeinflussen CSS-Einheiten das responsive Design?▾
rem- und em-Einheiten werden mit Schriftgrößeneinstellungen skaliert, wodurch sie responsive-freundlich sind. Die CSS clamp()-Funktion kombiniert Min-, Preferred- und Max-Werte: font-size: clamp(1rem, 2.5vw, 2rem). Media Queries können die Root-Schriftgröße anpassen und alle rem-basierten Werte skalieren proportional.
Wie beeinflussen CSS-Einheiten die Barrierefreiheit?▾
Benutzer, die die Standard-Schriftgröße ihres Browsers erhöhen, erwarten, dass sich der Text entsprechend skaliert. px-basierte Schriftgrößen ignorieren diese Einstellung. rem-basierte Größen respektieren sie. Der WCAG 2.1 Success Criterion 1.4.4 erfordert, dass Text bis zu 200% vergrößert werden kann, ohne dass Inhalte verloren gehen. Die Verwendung von rem für Schriftgrößen hilft, diese Anforderung zu erfüllen.