CSS-Einheitenumrechner
Rechnen Sie zwischen CSS-Einheiten um: px, rem, em, vw, vh und %. Konfigurieren Sie Basis-Schriftgröße und Viewport-Abmessungen für genaue Ergebnisse.
Einstellungen
Alle Entsprechungen
| Einheit | Wert |
|---|---|
| px | 16px |
| rem | 1rem |
| em | 1em |
| vw | 0.833333vw |
| vh | 1.48148vh |
| % | 100% |
= 16 px
Kurzreferenz (px → rem)
| px | rem | em | vw | vh |
|---|---|---|---|---|
| 8px | 0.5rem | 0.5em | 0.416667vw | 0.740741vh |
| 12px | 0.75rem | 0.75em | 0.625vw | 1.11111vh |
| 14px | 0.875rem | 0.875em | 0.729167vw | 1.2963vh |
| 16px | 1rem | 1em | 0.833333vw | 1.48148vh |
| 18px | 1.125rem | 1.125em | 0.9375vw | 1.66667vh |
| 20px | 1.25rem | 1.25em | 1.04167vw | 1.85185vh |
| 24px | 1.5rem | 1.5em | 1.25vw | 2.22222vh |
| 32px | 2rem | 2em | 1.66667vw | 2.96296vh |
| 48px | 3rem | 3em | 2.5vw | 4.44444vh |
| 64px | 4rem | 4em | 3.33333vw | 5.92593vh |
So rechnen Sie CSS-Einheiten um
- Legen Sie Ihre Basis-Schriftgröße (Standard: 16px) und Viewport-Abmessungen fest
- Geben Sie einen Wert ein und wählen Sie die Einheit (px, rem, em, vw, vh oder %)
- Sehen Sie alle äquivalenten Werte in anderen CSS-Einheiten
- Prüfen Sie die Kurzreferenztabelle für häufige px-zu-rem-Umrechnungen
Anwendungsfälle
- •Responsives Design: Feste Pixelwerte in flexible rem- oder vw-Einheiten umrechnen
- •Design-Übergabe: Figma/Sketch-Pixelspezifikationen in CSS-rem-Werte übersetzen
- •Barrierefreiheit: rem-Einheiten verwenden, damit Text die Schriftgrößeneinstellungen der Benutzer respektiert
- •Layout: Viewport-relative Abmessungen für randlose Bereiche berechnen
Formel
CSS-Einheitenumrechnungen hängen von der Basis-Schriftgröße und den Viewport-Abmessungen ab. rem = px / baseFontSize. vw = px / viewportWidth × 100. vh = px / viewportHeight × 100.
Häufig gestellte Fragen
Was ist der Unterschied zwischen rem und em?
rem ist relativ zur Schriftgröße des Wurzelelements (html). em ist relativ zur Schriftgröße des übergeordneten Elements. Auf der Wurzelebene sind beide identisch.
Was ist die Standard-Schriftgröße des Browsers?
Die meisten Browser verwenden standardmäßig 16px. Das bedeutet: 1rem = 16px, sofern die Wurzel-Schriftgröße nicht geändert wird.
Wann sollte ich vw/vh verwenden?
Verwenden Sie vw (Viewport-Breite) und vh (Viewport-Höhe) für Elemente, die proportional zum Browserfenster skalieren sollen, z. B. Hero-Bereiche oder ganzseitige Hintergründe.
Wie rechne ich px in rem um?
Teilen Sie den Pixelwert durch die Basis-Schriftgröße. Bei der Standard-Schriftgröße von 16px: 24px ÷ 16 = 1,5rem.
Worauf bezieht sich die %-Einheit?
Die %-Einheit ist in CSS kontextabhängig. Bei font-size bezieht sie sich auf die font-size des übergeordneten Elements. Bei width bezieht sie sich auf die Breite des übergeordneten Elements.