Pixel für sie
Konvertieren Sie px mithilfe der Schriftgröße eines übergeordneten Elements in em.
So konvertieren Sie px in em
1. Identifizieren Sie die Schriftgröße des übergeordneten Elements in Pixel (z. B. 18 Pixel).
2. Gib den zu konvertierenden px-Wert ein (z. B. 9 px Buchstabenabstand).
3. Lies das EM-Ergebnis ab (9 ÷ 18 = 0,5 EM).
4. In CSS auf das untergeordnete Element anwenden, das auf diesen übergeordneten Kontext beschränkt ist.
Px to em Beispiele
Knopfpolsterung
Übergeordnete Schriftart 16 px; vertikaler Abstand 8 px → 0,5 em. Skaliert, wenn das übergeordnete Element auf großen Bildschirmen 18 Pixel groß wird.
Verschachtelte Überschrift
Abschnittsschriftart 20 px; Unterüberschrift 24 px Design → 1,2 em relativ zum Abschnitt, nicht zum Stamm.
Symbolausrichtung
Inline-Symbol 14 px mit 16 px Textzeile → 0,875 cm. Das Symbolfeld wird an den Textmetriken ausgerichtet.
Wann man px in em umwandelt
• Wenn Komponenteninterna mit lokalen Änderungen der Schriftgröße skaliert werden sollen.
• Wenn du Rich Text formatieren, bei dem Überschriften in unterschiedlich großen Containern stehen.
• Wenn altes CSS em verwendet und Sie neue px-Designs demselben System zuordnen.
Vermeiden Sie, dass sich die Fallstricke verschlimmern
Tief verschachtelte Menüs mit Schriftgröße: 0,9em verkleinern den Text auf jeder Ebene unerwartet. Bevorzugen Sie rem für die Schriftgröße auf Strukturebene; Nutze sie für die lokale Auffüllung, die an ein übergeordnetes Element gebunden ist. Dokumentieren Sie übergeordnete Annahmen in Design-Tokens.
Häufige Fragen
Was ist der Unterschied zwischen em und rem?
em verweist auf die übergeordnete Schriftgröße; rem bezieht sich nur auf die Root-Schriftgröße (HTML).
Warum werden verschachtelte Ems zusammengesetzt?
Jede Ebene multipliziert: 1,2 em innerhalb von 1,2 em parent = 1,44 × root, wenn beides auf Schriftgrößenketten zutrifft.
Formel?
em = px ÷ parentFontSizePx. Nutze immer die berechnete Schriftgröße des direkten übergeordneten Elements.
Polsterung in ihnen?
Ja — Auffüllung/Rand im Geviert skaliert mit der eigenen Schriftgröße des Elements (für Rand/Auffüllung verwendet die Spezifikation die Schriftgröße des Elements).
Wann sind sie entstanden?
Traditionell „Breite des Großbuchstabens M“ in Metallschrift; jetzt relativ zur Schriftgröße in CSS definiert.