em in px umrechnen Em ↔ Pixels Kostenlos Online Sicher
Geben Sie einen Wert in em ein und lesen Sie ihn sofort in px ab. Gerechnet wird in Ihrem Browser, nichts wird irgendwohin geschickt, und wovon das Ergebnis abhängt, steht unten, statt vorausgesetzt zu werden.
Kein Upload
Übliche Größen — em in px umrechnen
| em | px |
|---|---|
| 0.5 | 8 |
| 0.75 | 12 |
| 1 | 16 |
| 1.25 | 20 |
| 1.5 | 24 |
| 2 | 32 |
| 2.5 | 40 |
| 3 | 48 |
| 4 | 64 |
Woher diese Einheiten kommen
Das Pixel in CSS ist nicht das Pixel Ihres Bildschirms. Als Anzeigen keine vorhersagbare Dichte mehr hatten, wurde eine in echten Pixeln bemessene Seite zu einer Seite, die schrumpfte, je schärfer die Schirme wurden; also bestimmte man das CSS-Pixel neu als Bezugslänge: etwa 1/96 Zoll, aus bequemem Leseabstand gesehen. Alles andere auf dieser Seite baut darauf auf. Das Em ist älter als das Web — im Bleisatz war es die Breite eines gegossenen Blocks, benannt nach dem großen M — und bedeutet in CSS die geltende Schriftgröße, weshalb es sich beim Verschachteln ändert. Das Rem wurde eingeführt, um genau dem zu entkommen: es ist das Em des Wurzelelements und summiert sich nie. Das Vw kam mit dem responsiven Entwurf: ein Hundertstel der Fensterbreite, wie groß die auch ausfällt.
Wo sie Ihnen begegnen
Dies sind die Einheiten jedes Stylesheets. Pixel bemessen Rahmen, Schatten und alles, was nicht skalieren soll; Rem bemisst Schrift, Abstände und Layout, sodass eine einzige Änderung an der Wurzel eine ganze Oberfläche umskaliert; Em bemisst, was dem eigenen Text folgen soll, etwa die Polsterung in einer Schaltfläche; Vw bemisst Überschriften und Kopfbereiche, die auf jedem Gerät den Schirm füllen müssen. Zwischen ihnen umzurechnen ist die tägliche Rechenarbeit, aus einem in Pixeln übergebenen Entwurf ein Stylesheet zu machen, das mitwächst.
Häufige Fragen
Warum sind 16 px der übliche Ausgangspunkt?
Weil das in jedem großen Browser die voreingestellte Textgröße ist und ein Stylesheet, das sie nicht überschreibt, sie erbt. Ein Rem entspricht daher bei Voreinstellung 16 px — daher die vertrauten Umrechnungen: 0,5 rem sind 8 px, 1,5 rem sind 24 px. Hat ein Benutzer die Voreinstellung in seinem Browser vergrößert, wachsen dieselben Rem-Werte mit, und genau darum benutzt man sie.
Soll ich rem oder em nehmen?
Rem für alles, was der Seite als Ganzem folgen soll — Schriftstufen, Abstände, Layoutbreiten —, denn es wird von der Wurzel aus gemessen und häuft sich nie. Em für alles, was dem Text folgen soll, in dem es sitzt: die Polsterung einer Schaltfläche, der Abstand neben einem Symbol, der Einzug eines Zitats. Der verbreitete Fehler ist, em-bemessene Elemente ineinander zu schachteln: 1,2 em in 1,2 em wird 1,44, dann 1,73, bis der Text am Seitenende doppelt so groß ist wie gedacht.
Ist das Ergebnis exakt?
Wo beide Einheiten durch ganze Zahlen voneinander abgeleitet sind, ja — die Seite sagt es über der Zahl, und gerundet wird nur bei der Anzahl der angezeigten Stellen. Wo das Verhältnis keine endliche Dezimalzahl hat, zeigt die Seite zwölf signifikante Stellen und nennt die Beziehung näherungsweise, statt etwas anderes vorzugeben.
Verlässt etwas, das ich eingebe, mein Gerät?
Nein. Die Rechnung läuft in Ihrem Browser; nichts wird hochgeladen, und es gibt auch keinen Server dafür. Einmal geladen, funktioniert die Seite auch ohne Netz.
Warum man em in px umrechnet
Ein Stylesheet sagt margin-bottom: 0.75em bei einer Überschrift, padding: 0.4em 0.9em bei einer Schaltfläche und line-height: 1.3em bei einem Textblock. Es sind gute, flexible Werte, und sie lassen sich kaum bildlich vorstellen. Wie viele Pixel hat dieser Abstand? Passt das Padding der Schaltfläche zu den 6 px und 14 px in der Designdatei? Um es herauszufinden, rechnen Sie em in px um: Sie multiplizieren mit der Schriftgröße, auf die sich das em bezieht, und lesen die Antwort in der Einheit ab, die die Designwerkzeuge verwenden. Es ist eine Frage, die Entwickler stellen, wenn sie Code prüfen, einen Build gegen einen Entwurf abgleichen, ein Abstandsproblem untersuchen oder eine fertige Komponente an jemanden übergeben, der in Pixeln denkt.
Em ist die kniffligste Einheit in CSS beim Umrechnen, weil sie keinen festen Wert hat. Ein em ist die Schriftgröße, die dort gilt, wo der Wert verwendet wird, oder, für die Eigenschaft font-size selbst, die des übergeordneten Elements. So können 1.5 em an einer Stelle 24 px und an einer anderen 36 px sein, im selben Stylesheet, aus derselben Regel. Der Umrechner rät deshalb nicht. Er fragt nach der Schriftgröße, auf die sich das em bezieht, zeigt sie neben der Antwort an und rechnet mit ihr. Kennen Sie die Größe nicht, erklären die Abschnitte unten, wie Sie sie in Ihrem Browser finden.
Die Berechnung findet in Ihrem Browser statt, und nichts wird hochgeladen. Weiter unten finden Sie die Formel, wie Sie die richtige Basis finden, was die Umrechnung erhält und nicht erhalten kann, wie sich verschachtelte em-Werte vervielfachen, wann Entwickler em in px umrechnen müssen und einige Gewohnheiten, die ein auf em beruhendes Stylesheet verständlich halten.
Die Formel und die Basis
px ist gleich em multipliziert mit der Schriftgröße
Die Formel ist eine einzige Multiplikation: px = em × Basis. Bei einer Basis von 16 px werden aus 1,5 em 24 px, aus 0,75 em 12 px und aus 2 em 32 px. Die Seite druckt die Basis neben das Ergebnis, sodass eine Zeile wie 1,5 em = 24 px (16 px) genau sagt, was angenommen wurde. Beträgt die Schriftgröße des Elements 20 px, tippen Sie 20, und aus 1,5 em werden 30 px.
Die Basis in Ihrem Browser finden
Öffnen Sie die Entwicklerwerkzeuge, wählen Sie das Element aus und sehen Sie sich seine berechnete Schriftgröße an. Das ist die Zahl, die Sie für jede andere Eigenschaft als font-size in das Basisfeld tippen. Für font-size selbst wählen Sie stattdessen das übergeordnete Element aus und lesen dessen berechnete Größe ab. Es dauert wenige Sekunden und beseitigt das Raten vollständig.
Wenn Sie die Seite nicht sehen
Lesen Sie Code ohne die Seite, verfolgen Sie die Kette der Schriftgrößen vom Element aufwärts: seine eigene font-size, falls es eine hat, sonst die des übergeordneten Elements, und so weiter bis zur Wurzel, die 16 px beträgt, sofern nicht das Stylesheet oder der Leser sie geändert hat. Wo eine Größe in em angegeben ist, multiplizieren Sie entlang der Kette. Das ist mühsam, weshalb sich die meisten Teams für Schriftgrößen auf rem einigen.
Was die Umrechnung erhält und was nicht
Sie erhält das Verhältnis zum Text
Das Ergebnis ist die Pixelgröße, für die das em bei der von Ihnen getippten Basis steht. In em geschrieben, folgt ein Abstand oder eine Größe dem Text, zu dem sie gehört, und die Umrechnung zeigt, was das für eine bestimmte Textgröße ergibt.
Sie kann nicht eine Antwort für die ganze Seite liefern
Hier ist Vorsicht geboten: em ist relativ zur Schriftgröße des Elements selbst oder, bei font-size, des übergeordneten Elements, nicht zur Wurzel. Dieselben 1,5 em sind also 24 px in einem Element von 16 px und 36 px in einem von 24 px, und em in em vervielfacht sich. Die Zahl auf der Seite stimmt für die Basis im Feld und für nichts sonst. Wollen Sie eine Zahl, die überall gilt, dafür ist rem da. Um die beiden zu vergleichen, rechnen Sie rem in px um und sehen Sie, wie eine auf die Wurzel bezogene Einheit fest bleibt.
Rundung
Die Multiplikation mit einer ganzzahligen Basis liefert für die meisten Werte exakte Ergebnisse. Ist die Basis eine Dezimalzahl, zum Beispiel 13,5 px, ergibt ein Wert wie 1,2 em 16,2 px. Browser kommen mit gebrochenen Pixeln zurecht, doch wenn Sie ganze Pixel brauchen, für eine haarfeine Linie oder ein Symbol auf einem Raster, runden Sie bewusst und prüfen Sie, wie es aussieht.
Wie sich verschachtelte em-Werte vervielfachen
Eine Liste in einer Liste
Nehmen Sie eine Seite, deren Fließtext 16 px beträgt. Eine Liste hat font-size: 0.875em, das sind 14 px. Die Einträge darin haben ebenfalls font-size: 0.875em, das sind 14 × 0,875 = 12,25 px. Eine Liste in einem Eintrag tut es noch einmal: 10,7 px. Drei Ebenen tief, und der Text ist winzig, ohne dass jemand es so entschieden hätte. Wenn Sie für eine Komponente em in px umrechnen und die Antwort zu klein aussieht, ist die Verschachtelung das Erste, was Sie prüfen sollten.
Die Kette hinaufgehen
Um die wahre Pixelgröße verschachtelter em zu kennen, multiplizieren Sie die Basis mit jedem Wert auf dem Weg nach unten: 16 × 0,875 × 0,875 = 12,25. Der Umrechner macht einen Schritt nach dem anderen. Für eine Kette rechnen Sie den ersten Wert um, nehmen die Antwort als Basis für den zweiten und fahren fort. Es ist dieselbe Arithmetik, die der Browser ausführt.
Wie man das Aufschaukeln stoppt
Verwenden Sie rem für Schriftgrößen, sodass sich jede Größe auf die Wurzel bezieht, und behalten Sie em für Abstände, sodass Innenabstände und Ränder dem Text ihres eigenen Elements folgen. In dieser Kombination schaukelt sich nichts auf, und die em-Werte, die Sie umrechnen, beziehen sich stets auf eine Schriftgröße, die Sie sofort ablesen können.
Übliche Werte
Die Tabelle am Fuß der Seite
Die Seite enthält eine Tabelle der Pixelwerte, denen gängige em-Zahlen bei der von Ihnen gesetzten Basis entsprechen: 0,5 em sind 8 px, 0,625 sind 10, 0,75 sind 12, 0,875 sind 14, 1 sind 16, 1,125 sind 18, 1,25 sind 20, 1,5 sind 24, 2 sind 32, 3 sind 48 und 4 sind 64. Bei der Standardbasis sind es dieselben Zahlen wie bei rem. Ändern Sie die Basis, ändert sich die Tabelle mit, was ein guter Weg ist zu sehen, was em wirklich tut.
Zwei Basen nebeneinander ausprobieren
Tippen Sie 1,5 bei einer Basis von 14, dann bei einer Basis von 20. Sie erhalten 21 und 30 Pixel. Das ist der ganze Unterschied zwischen em und rem in einem Versuch: dieselbe Zahl, zwei Elemente, zwei Größen.
So rechnen Sie em hier in px um
Den em-Wert eintippen
Geben Sie die Größe in em im ersten Feld ein. Dezimalzahlen werden akzeptiert, 0.714 funktioniert also ebenso wie 1.
Die Schriftgröße setzen, auf die sich das em bezieht
Tippen Sie die Schriftgröße des Elements ein, oder die seines übergeordneten Elements, wenn die Eigenschaft font-size ist. Sind Sie unsicher, lassen Sie 16 stehen und betrachten Sie das Ergebnis als Näherung.
Den Pixelwert ablesen
Die Antwort erscheint sofort, mit der Basis daneben. Kopieren Sie sie in Ihre Notizen oder vergleichen Sie sie mit der Designdatei.
Woher diese Einheiten kommen
Das em
Das em ist älter als das Web. Im Bleisatz war es die Breite eines gegossenen Blocks, benannt nach dem Großbuchstaben M, und Setzer sprechen noch heute von Geviertstrichen und Geviertabständen. In CSS bedeutet es die geltende Schriftgröße, weshalb es sich ändert, wenn Sie Elemente verschachteln.
Das Pixel und das rem
Als Bildschirme keine vorhersehbare Dichte mehr hatten, wurde aus einer in echten Pixeln bemessenen Seite eine Seite, die schrumpfte, je schärfer die Bildschirme wurden. Deshalb wurde das CSS-Pixel als Bezugslänge neu definiert: etwa 1/96 Zoll, gesehen aus bequemem Leseabstand. Das rem kam hinzu, um dem Aufschaukeln von em zu entgehen: Es ist das em des Wurzelelements und vervielfacht sich nie. Arbeiten Sie mit beiden, rechnen Sie px in em um, um den umgekehrten Weg zu gehen.
Wann Entwickler em in px umrechnen
Einen Build gegen eine Designdatei prüfen
Ein Designer übergibt eine Datei in Pixeln, und der Code ist in em. Um zu prüfen, ob die Seite passt, rechnen Sie em in px um, mit der Schriftgröße jeder Komponente. Eine Schaltfläche mit einer Beschriftung von 14 px und einem Padding von 0.714em 1.429em sollte bei 10 px und 20 px herauskommen, und sagt das Design 12 und 24, stimmt eines von beiden nicht.
Abstände untersuchen
Sieht eine Lücke zu groß oder zu klein aus, liegt die Ursache meist an einem em-Wert, der sich auf eine größere oder kleinere Schrift bezieht, als Sie erwartet haben. Rechnen Sie ihn mit der berechneten Schriftgröße des Elements um, sagt Ihnen das sofort, ob die Arithmetik das Problem ist.
Fremden Code lesen
Übernommene Stylesheets sind voller em-Werte, deren Pixelgrößen Sie rekonstruieren müssen. Eine Handvoll der wichtigsten mit den richtigen Basen umzurechnen, liefert Ihnen eine Karte des Designs.
Dokumentation und Tests schreiben
Menschen, die eine Seite testen, beschreiben, was sie sehen, in Pixeln. Ein Entwickler, der sagt, das Padding sei 0.9em, bedeutet einem Tester wenig; 12,6 px bedeutet etwas. Das Umrechnen lässt beide Seiten einander verstehen.
Fallen beim Umrechnen von em in px
Die falsche Basis verwenden
Der häufigste Fehler. Für font-size verwenden Sie die Größe des übergeordneten Elements, für alle anderen Eigenschaften die des Elements selbst. Prüfen Sie die Eigenschaft, bevor Sie die Basis eintippen.
Ein übergeordnetes Element in em vergessen
Ist die Größe des übergeordneten Elements selbst in em, müssen Sie der Kette folgen. Nehmen Sie den berechneten Wert aus den Entwicklerwerkzeugen, um es abzukürzen.
Annehmen, der Bildschirm zeige dieselben Pixel
Ein CSS-Pixel ist kein Gerätepixel. Auf einem Bildschirm hoher Dichte kann ein CSS-Pixel zwei oder drei Gerätepixel sein. Die Umrechnung liefert CSS-Pixel, die Einheit, die die Designwerkzeuge und das Stylesheet teilen.
Die Antwort für ein Versprechen halten
Vergrößert der Leser den Text oder wird die Komponente mit einer anderen Schriftgröße wiederverwendet, ändern sich die Pixel, wie es sein soll. Die umgerechnete Zahl beschreibt eine Situation, nicht alle.
Fragen, die man vor dem Umrechnen stellt
Wie viele Pixel sind 1 em?
So viele wie die geltende Schriftgröße: 16 px für gewöhnlichen Fließtext bei der Voreinstellung, 24 px in einem Element von 24 px.
Wie viele Pixel sind 2 em?
Das Doppelte der geltenden Schriftgröße. Bei 16 px sind das 32 px.
Warum zeigt mein Browser etwas anderes?
Die tatsächliche Schriftgröße des Elements ist eine andere als die Basis, die Sie getippt haben. Lesen Sie die berechnete Schriftgröße in den Entwicklerwerkzeugen ab.
Ist em dasselbe wie rem?
Nein. Em ist relativ zum Element, rem zur Wurzel.
Wird meine Zahl hochgeladen?
Nein. Die Arithmetik läuft in Ihrem Browser, und nichts wird irgendwohin gesendet.
Wie komme ich zurück?
Mit px in em umrechnen, das dividiert statt zu multiplizieren.
Gewohnheiten, die ein em-Stylesheet verständlich halten
Die Basis kommentieren
Eine Zeile wie padding: 0.75em 1.25em; /* 12px 20px at 16px */ kostet wenige Zeichen und erspart dem nächsten Leser eine Umrechnung. Sie hält die Basis fest, von der Sie ausgegangen sind.
Die Schriftgröße einmal je Komponente setzen
Definieren Sie die Schriftgröße der Komponente an ihrem Wurzelelement und beziehen Sie sich darin mit em auf sie. Die Basis ist dann für jeden Wert in der Komponente dieselbe, und Sie können em dagegen mit Zuversicht in px umrechnen.
em für Abstände, rem für Schrift
Es ist die Aufteilung, auf die sich die meisten Stylesheets einigen, und sie hält die Arithmetik einfach. Für Größen relativ zum Bildschirm sind px in vw und vw in px die Werkzeuge.
Bei anderer Textgröße testen
Erhöhen Sie die Standardtextgröße in Ihrem Browser und sehen Sie sich die Seite an. Folgen die Abstände dem Text, funktionieren die em-Werte. Tun sie es nicht, wurde etwas in Pixeln belassen.
Ein Vorgehen für die kniffligen Fälle
Von außen nach innen arbeiten
Liegt eine Komponente tief in anderen und sehen ihre em-Werte verwirrend aus, beginnen Sie beim äußersten Element, dessen Größe Sie kennen, und arbeiten Sie sich nach innen, indem Sie jeweils eine Ebene umrechnen. Notieren Sie jede Pixelgröße im Vorbeigehen. Nach zwei oder drei Ebenen liegt die ganze Kette auf dem Papier, und Sie sehen genau, woher eine überraschende Zahl stammt. Es dauert eine Minute und ersetzt eine Stunde Raten.
Entscheiden, ob vereinfacht wird
Müssen Sie em über vier Ebenen in px umrechnen, um ein Layout zu verstehen, will Ihnen das Stylesheet etwas sagen. Erwägen Sie, die Schriftgrößen auf rem umzustellen, sodass sich jede auf die Wurzel bezieht, und nur die Abstände in em zu belassen. Die Seite sieht gleich aus und ist nächstes Jahr weit leichter zu lesen.
Verwandte Umrechner
Dieselbe Werkzeugfamilie deckt die benachbarten Umrechnungen ab. Um zu em zurückzukehren, nutzen Sie px in em umrechnen. Für auf die Wurzel bezogene Größen gibt es px in rem umrechnen und rem in px umrechnen, und für auf den Bildschirm bezogene Größen px in vw umrechnen und vw in px umrechnen. Für die Farben desselben Stylesheets erledigen HEX in RGB umrechnen und RGB in HEX umrechnen die Schreibweisen.
Ein durchgerechnetes Beispiel
Angenommen, Sie prüfen eine Schaltflächenkomponente. Die Beschriftung hat 14 px, das CSS sagt padding: 0.714em 1.429em und einen Abstand von 0.5em zwischen Symbol und Beschriftung. Sie tippen 14 als Basis, dann 0.714 und lesen 10 px ab, 1.429 und lesen 20 px ab, 0.5 und lesen 7 px ab. Die Designdatei sagt 10, 20 und 8. Zwei von drei stimmen, also sehen Sie sich den Abstand an: 8 px bei einer Basis von 14 wären 0.571 em, und jemand hat auf 0.5 gerundet. Sie bringen es in der Prüfung vor, und die Korrektur ist eine einzige Zahl.
Eine kurze Checkliste
Vor dem Umrechnen
Finden Sie die Schriftgröße heraus, auf die sich das em bezieht, aus den Entwicklerwerkzeugen oder aus der Kette der Schriftgrößen im Code.
Beim Umrechnen
Tippen Sie den em-Wert, setzen Sie die Basis und lesen Sie die Pixel ab, wobei Sie die neben dem Ergebnis gezeigte Basis beachten.
Nach dem Umrechnen
Vergleichen Sie mit der Designdatei. Weichen die Zahlen ab, prüfen Sie die Basis, bevor Sie den Code verdächtigen.
Häufige Fehler
16 verwenden, ohne zu prüfen
Das stimmt nur, wenn die Schriftgröße des Elements 16 px beträgt.
em mit rem verwechseln
Sie sehen ähnlich aus und verhalten sich verschieden. Nutzen Sie für jedes die richtige Seite.
Vergessen, dass em sich aufschaukelt
Ein Wert in einem verschachtelten Element ist relativ zu einer Größe, die Sie vielleicht nicht gesehen haben. Folgen Sie der Kette.
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. Hinterher gibt es nichts zu löschen und kein Konto anzulegen. Das ist der schlichte Weg, em in px umzurechnen.
Zusammenfassung
Um em hier in px umzurechnen, tippen Sie die Größe in em und die Schriftgröße, auf die sie sich bezieht, und lesen das Ergebnis sofort in Pixeln ab, mit der Formel px = em × Basis. Die Umrechnung erhält das Verhältnis zur Schriftgröße, die dort gilt, wo der Wert verwendet wird. Sie kann keine einzelne Antwort für eine Seite liefern: em ist relativ zum Element selbst oder, bei font-size, zum übergeordneten Element, sodass dieselben 1,5 em 24 px in einem Element von 16 px und 36 px in einem von 24 px sind und sich em in em vervielfacht. Für eine Zahl, die überall gilt, nutzen Sie rem. Nichts wird hochgeladen.