px in em umrechnen Pixels ↔ Em Kostenlos Online Sicher

Warum man px in em umrechnet

Em ist die älteste relative Einheit in CSS und diejenige, die die meisten Streitigkeiten auslöst. Sie haben aus einer Designdatei eine Größe in Pixeln, 20 px Innenabstand an einer Schaltfläche, 14 px Abstand neben einem Symbol, 36 px für eine Überschrift, und möchten sie in em haben, damit sie dem Text folgt, zu dem sie gehört. Wenn Sie px in em umrechnen, stellen Sie eine bestimmte Frage: Welches Vielfache der aktuellen Schriftgröße ist das? Die Antwort hängt von einer Zahl ab, die die Seite nicht erraten kann, nämlich der Schriftgröße, die dort gilt, wo der Wert verwendet wird; der Umrechner setzt diese Zahl deshalb in ein Feld und verwendet sie offen.

Der Grund, Größen in em zu schreiben, ist, dass Dinge, die zu Text gehören, mit dem Text wachsen sollen. Der Innenabstand einer Schaltfläche sollte größer sein, wenn ihre Beschriftung größer ist. Der Abstand zwischen einem Symbol und seiner Bildunterschrift sollte sich vergrößern, wenn die Bildunterschrift größer wird. Der untere Rand einer Überschrift sollte in Proportion zur Überschrift bleiben. In all diesen Fällen ist der Pixelwert falsch, sobald sich die Schriftgröße ändert, und der em-Wert ist bei jeder Größe richtig. Das ist das ganze Argument für em, und es ist ein starkes.

Die Berechnung geschieht in Ihrem Browser, und nichts wird hochgeladen. Weiter unten finden Sie die Formel, den Grund, warum em mehr Sorgfalt braucht als rem, die Verschachtelungsfalle, die überraschende Größen erzeugt, die Stellen, an denen em die richtige Einheit ist, und eine Methode, in einem echten Stylesheet zwischen em und rem zu wählen.

Die Formel und die Basis

em ist gleich px geteilt durch die Schriftgröße

Die Formel ist eine Division: em = px ÷ Basis. Bei einer Basis von 16 px wird ein Wert von 24 px zu 1,5 em, 8 px zu 0,5 em und 20 px zu 1,25 em. Die Seite zeigt die Basis neben dem Ergebnis, etwa 24 px = 1,5 em (16 px), damit Sie sehen, was angenommen wurde. Die Arithmetik ist dieselbe wie bei rem. Die Bedeutung ist eine andere.

Was die Basis ist

Bei rem ist die Basis die Schriftgröße des Wurzelelements. Bei em ist es die Schriftgröße des Elements, in dem der Wert verwendet wird, oder, für die Eigenschaft font-size selbst, die des übergeordneten Elements. Deshalb hat em keine einzige Antwort: Derselbe Wert im Stylesheet bedeutet an verschiedenen Stellen verschiedene Pixelgrößen. Rechnen Sie einen Innenabstand für eine Schaltfläche mit 14 px Text um, geben Sie 14 als Basis ein. Rechnen Sie einen Außenabstand für eine Überschrift von 32 px um, geben Sie 32 ein.

Der Standard, wenn Sie es nicht wissen

Wollen Sie nur einen groben Wert, lassen Sie die Basis bei 16, der Größe gewöhnlichen Textes in einem Browser, an dem niemand etwas geändert hat. Das Ergebnis stimmt für einen Block normalen Fließtextes und gibt Ihnen ein Gefühl für die Proportion, auch wenn sich herausstellt, dass das Element eine andere Größe hat.

Was die Umrechnung behält und was nicht

Sie behält die Proportion zum Text

Das Ergebnis ist die Proportion relativ zur Schriftgröße, die dort gilt, wo der Wert verwendet wird. In em geschrieben, wächst und schrumpft ein Abstand mit dem Text daneben, und genau so sollte sich der Raum um Wörter verhalten.

Sie kann Ihnen keine einzige Zahl für die Seite geben

Hier ist Vorsicht geboten. Em bezieht sich auf die Schriftgröße des Elements selbst oder, bei font-size, auf die des übergeordneten Elements, nicht auf die Wurzel. Es gibt also keine einzige Antwort für eine Seite: Dieselben 1,5 em sind 24 px in einem Element mit 16 px und 36 px in einem mit 24 px, und em in em multipliziert sich. Der Wert auf der Seite stimmt für die Basis im Feld und für nichts anderes. Wollen Sie eine Zahl, die überall gilt, ist dafür rem da. Zum Vergleich px in rem umrechnen und sehen, wie sich derselbe Pixelwert verhält.

Runden

Die Division durch 16 ergibt für viele Größen glatte Werte und für andere periodische Dezimalbrüche. Ein Wert wie 0,8125 em ist in einem Stylesheet in Ordnung, doch Sie möchten vielleicht auf 0,8 oder 0,85 runden, wenn es auf die genaue Größe nicht ankommt. Behalten Sie den vollständigen Wert, wo Genauigkeit zählt.

Die Verschachtelungsfalle

Wie em sich aufschaukelt

Angenommen, eine Liste hat font-size: 0.875em und ihre Einträge haben ebenfalls font-size: 0.875em. Die Liste ist 87,5 % ihres übergeordneten Elements. Jeder Eintrag ist 87,5 % der Liste, also etwa 76,6 % des übergeordneten Elements. Eine in einen Eintrag verschachtelte Liste schrumpft erneut, auf etwa 67 %. Nach drei Ebenen ist der Text sehr klein, und niemand hat das absichtlich geschrieben. Das ist gemeint, wenn man sagt, em potenziere sich.

Warum das wichtig ist, wenn Sie px in em umrechnen

Rechnen Sie einen Pixelwert für font-size in em um, müssen Sie als Basis die Schriftgröße des übergeordneten Elements verwenden, nicht die des Elements selbst. Viele Fehler entstehen durch die falsche. Bei anderen Eigenschaften wie padding und margin ist die Basis die eigene Schriftgröße des Elements. Die Regel ist leicht gesagt und leicht vergessen: font-size schaut nach oben, alles andere schaut auf sich selbst.

Wie Sie Überraschungen vermeiden

Verwenden Sie em für Abstände, die dem Text folgen, und rem für Schriftgrößen. So potenzieren sich Schriftgrößen nie, weil sie sich auf die Wurzel beziehen, und Abstände folgen weiterhin ihrem eigenen Text. Das ist die Kombination, auf die sich die meisten modernen Stylesheets einigen.

Gängige Größen

Die Tabelle am Seitenende

Unter dem Umrechner steht eine Tabelle gängiger Größen bei der eingestellten Basis: 8 px sind 0,5 em, 10 px sind 0,625, 12 px sind 0,75, 14 px sind 0,875, 16 px sind 1, 18 px sind 1,125, 20 px sind 1,25, 24 px sind 1,5, 32 px sind 2, 48 px sind 3 und 64 px sind 4. Bei einer Basis von 16 sind das dieselben Zahlen wie bei rem, weshalb man beides verwechselt. Der Unterschied liegt darin, wofür die 16 steht.

Die Basis dem Element anpassen

Stellen Sie die Basis für eine kleine Schaltfläche auf 14, ändert sich die Tabelle: 14 px sind nun 1 em, 7 px sind 0,5 em und 21 px sind 1,5 em. Probieren Sie es aus, und Sie sehen, wie ein Innenabstand von 1,5 em in einer Schaltfläche mit 14 px eine andere Pixelgröße hat als in einer mit 18 px, und warum das nützlich ist.

So rechnen Sie px hier in em um

Den Pixelwert eingeben

Geben Sie die Größe in Pixeln im ersten Feld ein. Dezimalzahlen werden akzeptiert.

Die Schriftgröße festlegen, auf die sich em bezieht

Geben Sie die Schriftgröße des Elements ein oder die seines übergeordneten Elements, wenn Sie eine font-size umrechnen. Sind Sie unsicher, lassen Sie 16 stehen und behandeln Sie das Ergebnis als Näherung.

Den em-Wert kopieren

Verwenden Sie den Wert in Ihrem CSS mit seiner Einheit, etwa padding: 1.25em. Eine Zahl ohne Einheit ist für die meisten Eigenschaften nicht gültig.

Woher diese Einheiten kommen

Das Geviert im Bleisatz

Das em ist älter als das Web. Im Bleisatz war es die Breite eines gegossenen Blocks, benannt nach dem Großbuchstaben M, und es war die natürliche Einheit für horizontalen Raum in der gedruckten Zeile. Typografen sprechen noch heute von Geviertstrichen und Geviertleerzeichen. In CSS überlebt die Idee in lockererer Form: Ein em ist die Größe der aktuellen Schrift.

Das Pixel und das rem

Das CSS-Pixel ist eine Referenzlänge von etwa 1/96 Zoll, gesehen aus bequemem Leseabstand, und kein Punkt auf Ihrem Bildschirm. Das rem wurde hinzugefügt, um Entwicklern eine Einheit zu geben, die relativ ist, sich aber nie aufschaukelt: Es ist das em des Wurzelelements. Pixel, em und rem decken zusammen die drei Bedürfnisse ab: feste Größe, Größe relativ zum Text und Größe relativ zur Seite.

Wo em die richtige Wahl ist

Innenabstand in Schaltflächen und Formularfeldern

Eine Schaltfläche mit padding: 0.5em 1em sieht in der Proportion bei jeder Textgröße gleich aus. Machen Sie die Beschriftung größer, wächst die ganze Schaltfläche mit, und das wollen Sie von einer Komponente, die in einer Werkzeugleiste und in einem großen Banner vorkommen kann.

Abstände neben Symbolen

Ein Symbol mit nachfolgender Bildunterschrift braucht einen Abstand, der mit der Bildunterschrift skaliert. Ein Außenabstand von 0.4em leistet das; ein Außenabstand von 6px nicht.

Ränder um Überschriften und Absätze

Den vertikalen Rhythmus eines Dokuments hält man leichter, wenn der Absatzabstand in em angegeben ist, da er der Größe des Absatzes folgt. Der Rand einer Überschrift in em bleibt in Proportion, wenn sich die Überschrift an verschiedenen Haltepunkten in der Größe ändert.

Media Queries

In em geschriebene Haltepunkte reagieren auf die Textgröße des Lesers, das Layout wechselt also früher in seine schmale Form, wenn jemand seinen Text vergrößert hat. In Media Queries bezieht sich em auf den Standard des Browsers und nicht auf ein Element, es schaukelt sich also nicht auf.

Fallen beim Umrechnen von px in em

Die falsche Basis verwenden

Der häufigste Fehler. Für font-size nehmen Sie die Größe des übergeordneten Elements; für alles andere die des Elements selbst. Prüfen Sie, welche Eigenschaft Sie umrechnen, bevor Sie die Basis eingeben.

Vergessen, dass das übergeordnete Element ebenfalls in em sein kann

Ist die Schriftgröße des übergeordneten Elements selbst in em, müssen Sie der Kette nach oben folgen, um die wahre Größe zu kennen. Wird ein Stylesheet kompliziert, stellen Sie die Schriftgrößen auf rem um und behalten em für Abstände.

Eine einzige Zahl für eine ganze Komponente erwarten

Eine Komponente, die Text unterschiedlicher Größe enthält, hat für ihre Teile keinen einzigen em-Wert. Rechnen Sie jeden Teil gegen seine eigene Basis um.

em und rem für dieselbe Eigenschaft mischen

Ein Innenabstand von 1rem neben einem Außenabstand von 1em ist zulässig und oft verwirrend. Wählen Sie eine Regel, etwa rem für Schriftgrößen und em für Abstände, und halten Sie sich daran.

Fragen, die man vor dem Umrechnen stellt

Wie viel em sind 16 px?

Eins, wenn die geltende Schriftgröße 16 px beträgt. Beträgt die Schriftgröße des Elements 20 px, sind 16 px gleich 0,8 em.

Ist em besser als rem?

Keines von beiden ist besser. Rem ist besser für Schriftgrößen und das globale Layout. Em ist besser für Abstände, die ihrem eigenen Text folgen sollen.

Warum ist mein Innenabstand größer als erwartet?

Weil er relativ zur Schriftgröße des Elements ist, die größer sein kann, als Sie angenommen haben. Prüfen Sie die berechnete Schriftgröße in den Entwicklerwerkzeugen des Browsers.

Kann ich Dezimalzahlen verwenden?

Ja. Werte wie 0.625em und 1.333em sind normal.

Wird meine Zahl hochgeladen?

Nein. Die Arithmetik läuft in Ihrem Browser, und nichts wird irgendwohin gesendet.

Wie komme ich zurück?

Mit em in px umrechnen, das multipliziert, statt zu dividieren.

Klug wählen, wenn Sie px in em umrechnen

Entscheiden, wozu der Wert gehört

Gehört er zum Text, ist em richtig. Gehört er zur Seite, etwa eine Spaltenbreite oder ein Abschnittsabstand, passen rem oder eine Viewport-Einheit besser. px in vw umrechnen drückt eine Größe als Anteil der Bildschirmbreite aus.

Die Absicht in einem Kommentar festhalten

Eine Zeile wie padding: 0.75em 1.25em; /* 12px 20px at 16px */ macht die Überlegung sichtbar. Ändert sich die Schriftgröße später, wissen Sie, was die Zahlen bedeuten sollten.

Die Schriftgröße der Komponente an einer Stelle halten

Legen Sie die Schriftgröße am Wurzelelement der Komponente fest und lassen Sie alles darin darauf Bezug nehmen. Dann bedeuten die em-Werte darin überall in der Komponente dasselbe, und Sie können px gegen eine einzige Basis in em umrechnen.

Gute Gewohnheiten beim Umrechnen von px in em

px in em komponentenweise umrechnen

Versuchen Sie nicht, px für ein ganzes Stylesheet auf einmal in em umzurechnen. Nehmen Sie eine einzelne Komponente, etwa eine Karte oder eine Schaltfläche, legen Sie ihre Schriftgröße fest und rechnen Sie jeden ihrer Abstandswerte gegen diese Größe um. Ist die Komponente fertig, testen Sie sie bei zwei oder drei Textgrößen. Dann gehen Sie zur nächsten über.

Den Rechner für die krummen Werte nutzen, nicht für die runden

Werte wie 8, 16 und 24 Pixel ergeben bei einer Basis von 16 ordentliche em-Zahlen. Krumme Werte wie 22 oder 13 ergeben lange Dezimalbrüche. Wenn Sie dafür px in em umrechnen, entscheiden Sie, ob das Design den genauen Wert wirklich braucht oder ob der nächste runde em-Wert genauso gut wäre. Designer runden oft gern, und ein aufgeräumtes Stylesheet ist leichter zu pflegen.

Die Basis festhalten

Ein kurzer Kommentar neben jedem em-Wert, der sagt, was die Basis war, hilft der nächsten Person. Ändert jemand später die Schriftgröße der Komponente, weiß er, dass die Abstände ihr absichtlich und nicht zufällig folgen. Das einmal aufzuschreiben ist die Zeit wert, die es kostet.

Mit dem rem-Äquivalent vergleichen

Sind Sie unsicher, ob em oder rem zu einem Wert passt, rechnen Sie px in em und in rem um und fragen Sie, was geschehen soll, wenn sich die Textgröße ändert. Soll der Wert dem eigenen Text des Elements folgen, nehmen Sie em. Soll er der Seite folgen, nehmen Sie rem.

Verwandte Umrechner

Dieselbe Werkzeugfamilie deckt die benachbarten Umrechnungen ab. Um zu Pixeln zurückzukehren, nutzen Sie em in px umrechnen. Für Größen relativ zur Wurzel gibt es px in rem umrechnen und rem in px umrechnen, für Größen relativ zum Bildschirm px in vw umrechnen und vw in px umrechnen. Für die Farben desselben Stylesheets erledigen HEX in RGB umrechnen und HEX in HSL umrechnen die Schreibweisen.

Ein durchgerechnetes Beispiel

Angenommen, eine Schaltflächenbeschriftung hat 14 px, und das Design gibt der Schaltfläche 10 px vertikalen und 20 px horizontalen Innenabstand. Sie geben 14 als Basis ein, 10 und lesen 0,714 em ab, geben 20 ein und lesen 1,429 em ab. Im Stylesheet schreiben Sie padding: 0.714em 1.429em. Wird dieselbe Schaltfläche in einem großen Banner mit einer Beschriftung von 18 px verwendet, werden die Innenabstände 12,9 px und 25,7 px, in Proportion. Hätten Sie 10px und 20px geschrieben, hätte die Schaltfläche um den größeren Text dünn gewirkt.

Eine kurze Checkliste

Vor dem Umrechnen

Entscheiden Sie, zu welcher Eigenschaft der Wert gehört, und finden Sie die Schriftgröße, auf die er sich beziehen soll.

Beim Umrechnen

Geben Sie den Pixelwert und die richtige Basis ein und kopieren Sie den em-Wert mit seiner Einheit.

Nach dem Umrechnen

Ändern Sie die Schriftgröße der Komponente im Browser und prüfen Sie, ob die Abstände folgen. Suchen Sie nach verschachtelten em-Werten, die sich aufschaukeln.

Häufige Fehler

Die Wurzelgröße als Basis für den Innenabstand verwenden

Das ist die Aufgabe von rem. Em bezieht sich auf die eigene Schriftgröße des Elements.

Em für jede Schriftgröße verwenden

Verschachtelte em-Schriftgrößen schaukeln sich auf und überraschen Sie. Verwenden Sie rem für Schriftgrößen.

Auf eine optisch hübsche, aber falsche Zahl runden

1,43 ist nicht dasselbe wie 1,5, wenn man mit einer großen Schrift multipliziert. Behalten Sie genug Stellen.

Ihre Zahlen bleiben auf Ihrem Gerät

Die Berechnung findet lokal statt. Ihre Werte werden von Ihrem eigenen Browser verwendet, und nichts wird irgendwohin gesendet. Danach gibt es nichts zu löschen und kein Konto anzulegen. Das ist der schlichte Weg, px in em umzurechnen.

Zusammenfassung

Um px hier in em umzurechnen, geben Sie die Größe in Pixeln und die Schriftgröße ein, auf die sie sich bezieht, und lesen das Ergebnis sofort ab, nach der Formel em = px ÷ Basis. Die Umrechnung behält die Proportion relativ zur Schriftgröße, die dort gilt, wo der Wert verwendet wird. Eine einzige Antwort für eine Seite kann sie nicht geben: Em ist relativ zur eigenen Schriftgröße des Elements, bei font-size zu der des übergeordneten Elements, sodass dieselben 1,5 em in einem Element mit 16 px gleich 24 px und in einem mit 24 px gleich 36 px sind und sich em in em multipliziert. Für eine Zahl, die überall gilt, nutzen Sie rem. Nichts wird hochgeladen.