CSS-Einheiten

px, rem, em, pt, % und vw umrechnen

Keine Datenbank: AIMRAN speichert weder deine Dateien noch Texte oder Ergebnisse

Was ist CSS-Einheiten?

Im Webdesign gibt es viele Maßeinheiten: Pixel, rem, em, Punkte oder Prozent des Bildschirms. Dieses Tool rechnet einen Wert von einer Einheit in alle anderen um, damit du nicht selbst rechnen musst.

Du kannst die Schriftgröße der Seite, die des Elternelements und die Fenstergröße einstellen, damit das Ergebnis für deinen Fall exakt stimmt.

So funktioniert es

  1. Gib den Wert ein und wähle seine Einheit: px, rem, em, pt, %, vw oder vh.
  2. Stelle unter „Kontext“ Root-Schriftgröße, Schriftgröße des Elternelements sowie Breite und Höhe des Fensters ein.
  3. Kopiere die benötigte Entsprechung.
  4. Nutze die Kurzreferenz-Tabelle von px in rem, pt und vw.

Vorteile

Technische Details

Alle Umrechnungen laufen über CSS-Pixel. 1 rem entspricht der Schriftgröße des Root-Elements (html, standardmäßig 16 px); 1 em und 100 % entsprechen der Schriftgröße des Elternelements; 1 pt = 1/72 Zoll = 96/72 px ≈ 1,333 px gemäß der CSS-Definition von 96 px pro Zoll; 1 vw ist 1 % der Fensterbreite und 1 vh 1 % der Höhe (standardmäßig 1440 × 900 px, einstellbar). % wird als Prozent der Schriftgröße interpretiert, wie bei font-size. Die Ergebnisse werden auf vier Nachkommastellen gerundet.

Häufige Fragen

Wie viele Pixel sind 1 rem?

Das hängt von der Root-Schriftgröße ab. Standardmäßig sind es meist 16 px, also 1 rem = 16 px und 24 px = 1,5 rem.

Was ist der Unterschied zwischen rem und em?

rem bezieht sich auf die Schrift des Root-Elements (html) und ist auf der ganzen Seite gleich. em bezieht sich auf die Schrift des Elternelements und summiert sich daher beim Verschachteln.

Wie rechne ich px in rem um?

Teile die Pixel durch die Root-Schriftgröße. Bei 16 px Basis sind 14 px 0,875 rem.

Wie viele px sind 12 pt?

12 pt sind 16 px, weil in CSS 1 pt 1,333 px entspricht.

Was sind vw und vh?

Einheiten relativ zum Viewport: 1 vw ist 1 % der Breite, 1 vh 1 % der Höhe des sichtbaren Bereichs.

Weitere Tools: Entwickler