CSS-Einheiten-Konverter

CSS-Einheiten-Konverter – px, rem, em, % Rechner

🎨 Konvertieren Sie zwischen CSS-Einheiten: Pixel (px), rem, em, Prozent (%), Punkte (pt) und Viewport-Einheiten (vw, vh). Ein unverzichtbares Tool für responsives Webdesign und Entwicklung.

CSS-Einheitentypen

• Absolute Einheiten: px, pt, cm, mm, in – feste Größe unabhängig vom Kontext
• Relative Einheiten: rem, em, %, vw, vh – skalieren je nach Parent oder Viewport
• Schriftbezogene Einheiten: rem, em, ch, ex – basieren auf der Schriftgröße
• Viewport-bezogene Einheiten: vw, vh, vmin, vmax – basieren auf den Viewport-Abmessungen

Erklärungen der Einheiten

• px (Pixel): 1px = 1 Gerätepixel. Absolute Einheit, präzise, aber nicht skalierbar.
• rem: Relativ zum Root-Element (html). 1rem = standardmäßig 16px.
• em: Relativ zur Schriftgröße des Elternelements. Kann sich bei Verschachtelung aufschaukeln.
• %: Relativ zur Eigenschaft des Elternelements. 100% = wie der Parent.
• pt (Punkte): Druckeinheit. 1pt = 1/72 Zoll ≈ 1,333px.
• vw: 1vw = 1% der Viewport-Breite. 100vw = volle Breite.
• vh: 1vh = 1% der Viewport-Höhe. 100vh = volle Höhe.

Häufige Umrechnungen

• 1rem = 16px (Browser-Standard)
• 1em = 16px (wenn der Parent 16px hat)
• 100% = Größe des Elternelements
• 12pt = 16px (üblich im Druck)
• 1vw = 19,2px (bei 1920px Viewport)

62,5%-Methode

Setzen Sie html { font-size: 62.5%; } damit 1rem = 10px wird. Das vereinfacht Rechnungen: 1.6rem = 16px, 2.4rem = 24px usw.

Hinweise zur Barrierefreiheit

• Verwenden Sie rem für Schriften: respektiert die Schriftgrößen-Einstellungen des Nutzers
• Vermeiden Sie px für Schriften: skaliert nicht mit Nutzer-Einstellungen
• Nutzen Sie relative Einheiten: verbessert Zoom/Vergrößerung
• Testen Sie verschiedene Größen: prüfen Sie 200% Zoom und große Text-Einstellungen

Responsives Design

Verwenden Sie rem für Media Queries: @media (min-width: 48rem) statt 768px. So skalieren Breakpoints mit den Schriftgrößen-Präferenzen des Nutzers.

💡 Profi-Tipp: Moderne Best Practice: rem für die meisten Größen (Schriften, Abstände, Breakpoints), px für Rahmen und feine Details sowie % oder Viewport-Einheiten für Layouts. Vermeiden Sie em für Abstände, da es sich unerwartet aufschaukeln kann.