Pixel	Em
1 px	0.0625 em
2 px	0.125 em
3 px	0.1875 em
4 px	0.25 em
5 px	0.3125 em
6 px	0.375 em
8 px	0.5 em
10 px	0.625 em
12 px	0.75 em
14 px	0.875 em
15 px	0.9375 em
16 px	1 em
18 px	1.125 em
20 px	1.25 em
24 px	1.5 em
25 px	1.5625 em
28 px	1.75 em
32 px	2 em
36 px	2.25 em
40 px	2.5 em
44 px	2.75 em
48 px	3 em
50 px	3.125 em
56 px	3.5 em
64 px	4 em
72 px	4.5 em
75 px	4.6875 em
80 px	5 em
90 px	5.625 em

Em	Pixel
1 em	16 px
2 em	32 px
3 em	48 px
4 em	64 px
5 em	80 px
6 em	96 px
8 em	128 px
10 em	160 px
12 em	192 px
14 em	224 px
15 em	240 px
16 em	256 px
18 em	288 px
20 em	320 px
24 em	384 px
25 em	400 px
28 em	448 px
32 em	512 px
36 em	576 px
40 em	640 px
44 em	704 px
48 em	768 px
50 em	800 px
56 em	896 px
64 em	1024 px
72 em	1152 px
75 em	1200 px
80 em	1280 px
90 em	1440 px

PX und EM

In der Webentwicklung sind PX (Pixel) und EM Einheiten, die zur Angabe von Abständen, Schriftgrößen und anderen Längenmaßen in CSS verwendet werden. Hier ist eine kurze Erklärung beider Einheiten:

PX (Pixel)

Definition: Ein Pixel ist die kleinste Einheit eines digitalen Bildes oder Displays.
Verwendung: Die Angabe in Pixeln (px) ist absolut, was bedeutet, dass die Größe fest und unabhängig von anderen Faktoren ist.
Beispiel: font-size: 16px; setzt die Schriftgröße auf 16 Pixel.
Vorteile: Einfach zu verwenden und vorhersagbar, da sie eine feste Größe haben.
Nachteile: Kann auf verschiedenen Geräten und Bildschirmauflösungen unterschiedlich erscheinen und ist weniger flexibel bei der Anpassung an verschiedene Bildschirmgrößen.

EM

Definition: Eine EM-Einheit ist relativ zur Schriftgröße des nächstgelegenen Elternelements. Wenn kein Elternelement angegeben ist, wird die Standard-Schriftgröße des Browsers verwendet, typischerweise 16px.
Verwendung: Die Angabe in EM ermöglicht es, die Größe relativ zur Schriftgröße des Elternelements festzulegen.
Beispiel: Wenn die Schriftgröße des Elternelements 16px ist, dann entspricht 1em 16px. font-size: 2em; würde in diesem Fall 32px entsprechen.
Vorteile: Flexibel und skalierbar, da Änderungen der Größe des Elternelements alle Kindelemente beeinflussen.
Nachteile: Kann in tief verschachtelten Elementen aufgrund kumulativer Skalierungseffekte komplex zu handhaben sein.

Vergleich und Empfehlung

Absolut vs. Relativ: PX-Einheiten sind absolut und skalieren nicht, während EM-Einheiten relativ sind und basierend auf ihrem Elternelement skalieren.
Responsives Design: EM-Einheiten sind oft besser für responsives Design geeignet, da sie skalierbare und flexible Layouts ermöglichen.

Beispiel

Hier ein einfaches Beispiel, um den Unterschied zu verdeutlichen:

body {
    font-size: 16px; /* Basis-Schriftgröße */
}

h1 {
    font-size: 2em; /* 2em entspricht 32px, wenn die Schriftgröße des Elternelements 16px ist */
}

p {
    font-size: 16px; /* Feste Schriftgröße von 16px */
}

EM zu PX Konverter

Konvertierungstabellen

PX und EM

PX (Pixel)

EM

Vergleich und Empfehlung

Beispiel