Pixel für sie
Konvertieren Sie px mithilfe der Schriftgröße eines übergeordneten Elements in em. em ist relativ zum unmittelbar übergeordneten Element — nützlich, wenn der Abstand einer Schaltfläche mit dem Beschriftungstext skaliert werden soll oder ein Einzug einer verschachtelten Liste der lokalen Körpergröße folgt. Formel: em = px ÷ parentFontSizePx.
Pixels
Parent font size (px)
Result
1em
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.
Wann du besser etwas anderes wählst?
• Wenn du einen konsistenten Abstand auf der gesamten Website wünschen, ist „rem from root“ einfacher.
• Wenn eine tiefe Verschachtelung zu em-verstärkenden Fehlern führt, bevorzugen Sie rem für Ränder.
• Wenn du eine ansichtsfensterrelative Größe benötigen, verwenden Sie vw/vh.
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.
em für Medienanfragen?
Medienabfrage-EM-Einheiten beziehen sich in der Vergangenheit auf den Standardbrowser (16 Pixel), nicht auf die übergeordnete Komponente. Modernes responsives Design verwendet häufig rem- oder px-Haltepunkte — wissen Sie, auf welchen Kontext dein Stylesheet abzielt.
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.
Werden Daten hochgeladen?
Nein. Die Konvertierung erfolgt lokal.