Konvertieren Sie zwischen Pixeln (PX), Root em (REM) und em (EM) CSS-Einheiten mit diesem einfachen Rechner. Essentiell für responsives Webdesign und Entwicklung.
Konvertieren Sie zwischen Pixeln (PX), Root em (REM) und em (EM) Einheiten. Geben Sie einen Wert in ein Feld ein, um die entsprechenden Werte in den anderen Einheiten zu sehen.
Das Verständnis und die Umrechnung zwischen CSS-Einheiten sind entscheidend für responsives Webdesign und -entwicklung. Die PX (Pixel), REM (Root Em) und EM-Einheiten sind grundlegende Bausteine, die bestimmen, wie Elemente über verschiedene Geräte und Bildschirmgrößen dimensioniert und positioniert werden. Dieses umfassende Einheit Converter-Tool ermöglicht es Ihnen, Werte zwischen diesen drei kritischen CSS-Einheiten einfach zu übersetzen, was Ihnen hilft, flexiblere und wartbare Weblayouts zu erstellen.
Pixel (PX) sind feste Größen, die präzise Kontrolle bieten, aber keine Skalierbarkeit haben, während REM-Einheiten relativ zur Schriftgröße des Wurzel-Elements skalieren und EM-Einheiten relativ zur Schriftgröße ihres Elternelements skalieren. Die Umrechnung zwischen diesen Einheiten kann herausfordernd sein, insbesondere bei komplexen Designs oder wenn Zugänglichkeitsfunktionen wie die Textvergrößerung unterstützt werden. Unser PX, REM und EM Converter vereinfacht diesen Prozess, sodass Sie sich auf die Erstellung schöner, responsiver Designs konzentrieren können.
Pixel (PX) sind die grundlegendste und am häufigsten verwendete CSS-Einheit. Ein Pixel ist ein einzelner Punkt in einem digitalen Bildraster und stellt das kleinste steuerbare Element auf einem Bildschirm dar. In CSS bieten Pixel eine feste Maßeinheit, die unabhängig von anderen Stilfaktoren konsistent bleibt.
1.element {
2 width: 200px;
3 font-size: 16px;
4 margin: 10px;
5}
6
Wesentliche Merkmale von Pixeln:
REM (Root Em) Einheiten sind relative Einheiten, die basierend auf der Schriftgröße des Wurzel-Elements (typischerweise das <html>
-Element) skalieren. Standardmäßig setzen die meisten Browser die Schriftgröße des Wurzels auf 16px, wodurch 1rem gleich 16px ist, es sei denn, sie wird ausdrücklich geändert.
1html {
2 font-size: 16px; /* Standard in den meisten Browsern */
3}
4
5.element {
6 width: 12.5rem; /* Entspricht 200px bei standardmäßiger Schriftgröße des Wurzel-Elements */
7 font-size: 1rem; /* Entspricht 16px */
8 margin: 0.625rem; /* Entspricht 10px */
9}
10
Wesentliche Merkmale von REM-Einheiten:
EM-Einheiten sind relative Einheiten, die basierend auf der Schriftgröße ihres Elternelements skalieren. Wenn keine Schriftgröße für das Elternelement angegeben ist, verweisen EMs auf die geerbte Schriftgröße.
1.parent {
2 font-size: 20px;
3}
4
5.child {
6 font-size: 0.8em; /* Entspricht 16px (20px × 0.8) */
7 margin: 0.5em; /* Entspricht 8px (16px × 0.5) */
8}
9
Wesentliche Merkmale von EM-Einheiten:
Das Verständnis der mathematischen Beziehungen zwischen PX, REM und EM-Einheiten ist entscheidend für genaue Umrechnungen. Hier sind die Formeln, die in unserem Converter verwendet werden:
Um Pixel in REM-Einheiten umzurechnen, teilen Sie den Pixelwert durch die Schriftgröße des Wurzel-Elements:
Zum Beispiel, bei der standardmäßigen Schriftgröße des Wurzel-Elements von 16px:
Um Pixel in EM-Einheiten umzurechnen, teilen Sie den Pixelwert durch die Schriftgröße des Elternelements:
Zum Beispiel, bei einer Schriftgröße des Elternelements von 16px:
Um REM-Einheiten in Pixel umzurechnen, multiplizieren Sie den REM-Wert mit der Schriftgröße des Wurzel-Elements:
Zum Beispiel, bei der standardmäßigen Schriftgröße des Wurzel-Elements von 16px:
Um EM-Einheiten in Pixel umzurechnen, multiplizieren Sie den EM-Wert mit der Schriftgröße des Elternelements:
Zum Beispiel, bei einer Schriftgröße des Elternelements von 16px:
Um REM-Einheiten in EM-Einheiten umzurechnen, müssen Sie sowohl die Schriftgröße des Wurzel-Elements als auch die Schriftgröße des Elternelements berücksichtigen:
Wenn sowohl die Wurzel- als auch die Schriftgröße des Elternelements gleich sind (z. B. 16px), dann ist 1rem = 1em.
Um EM-Einheiten in REM-Einheiten umzurechnen, verwenden Sie die folgende Formel:
Wiederum, wenn beide Schriftgrößen gleich sind, dann ist 1em = 1rem.
Unser Einheit Converter-Tool macht es einfach, Werte zwischen PX, REM und EM-Einheiten zu übersetzen. Hier ist eine Schritt-für-Schritt-Anleitung zur effektiven Nutzung des Converters:
<html>
-Schriftgröße)Das Verständnis, wann jede CSS-Einheit verwendet werden sollte und wie man zwischen ihnen umrechnet, ist entscheidend für eine effektive Webentwicklung. Hier sind einige praktische Anwendungen und Szenarien, in denen unser Einheit Converter von unschätzbarem Wert ist:
Die Umrechnung zwischen Einheiten ist entscheidend für die Erstellung wirklich responsiver Designs:
1/* Konvertieren Sie feste Pixelwerte in responsive REM-Einheiten */
2.container {
3 /* Von: padding: 20px; */
4 padding: 1.25rem; /* 20px ÷ 16px = 1.25rem */
5
6 /* Von: margin-bottom: 32px; */
7 margin-bottom: 2rem; /* 32px ÷ 16px = 2rem */
8}
9
Die Verwendung relativer Einheiten verbessert die Zugänglichkeit, indem sie die Benutzerpräferenzen respektiert:
Moderne Designsysteme profitieren von durchdachter Einheitennutzung:
Die Erstellung harmonischer Typografie erfordert sorgfältige Einheitenauswahl:
1/* Typografiesystem unter Verwendung von REM-Einheiten */
2h1 { font-size: 2.5rem; } /* 40px */
3h2 { font-size: 2rem; } /* 32px */
4h3 { font-size: 1.5rem; } /* 24px */
5h4 { font-size: 1.25rem; } /* 20px */
6p { font-size: 1rem; } /* 16px */
7small { font-size: 0.875rem; } /* 14px */
8
Bei der Implementierung von Designs aus Tools wie Figma oder Photoshop:
Während PX, REM und EM die häufigsten Einheiten sind, gibt es Alternativen, die es wert sind, in Betracht gezogen zu werden:
Die Geschichte der CSS-Einheiten spiegelt die breitere Evolution des Webdesigns wider, von statischen Layouts bis hin zu den heutigen responsiven, zugänglichen Ansätzen.
In den frühen Tagen von CSS dominierten Pixel. Webdesigner erstellten feste Layouts, typischerweise 640px oder 800px breit, um gängigen Bildschirmauflösungen gerecht zu werden. Zugänglichkeit und Gerätevielfalt waren keine großen Anliegen, und pixelgenaue Kontrolle war das Hauptziel.
Mit der Diversifizierung der Bildschirmgrößen gewannen prozentuale Layouts an Popularität. Designer begannen, flexiblere Designs zu erstellen, obwohl die Typografie oft in Pixeln blieb. Diese Ära sah die Einführung von EM-Einheiten in CSS, obwohl ihre Akzeptanz aufgrund der Komplexität der Verwaltung kaskadierender Schriftgrößen begrenzt war.
Die Einführung des iPhones im Jahr 2007 veränderte das Webdesign. Plötzlich mussten Websites auf Bildschirmen so klein wie 320px breit funktionieren. Dies katalysierte das Interesse an responsiven Designtechniken und relativen Einheiten. Die Einschränkungen von EM-Einheiten (insbesondere der kaskadierende Effekt) wurden offensichtlicher, als Designs komplexer wurden.
Ethan Marcottes einflussreicher Artikel über responsives Webdesign im Jahr 2010 veränderte die Herangehensweise der Entwickler an CSS-Einheiten. Die REM-Einheit wurde in CSS3 eingeführt und bot die Vorteile der relativen Skalierung ohne die kaskadierenden Komplikationen von EM-Einheiten. Die Browserunterstützung für REM-Einheiten wuchs während dieses Zeitraums stetig.
Die heutige Webentwicklung umfasst eine Mischung aus Einheiten für verschiedene Zwecke:
Diese Evolution spiegelt den Übergang des Webs von einem dokumentenbasierten Medium zu einer komplexen Anwendungsplattform wider, die auf unzähligen Geräten und in verschiedenen Kontexten funktionieren muss.
1// Konvertieren zwischen PX, REM und EM-Einheiten
2const pxToRem = (px, rootFontSize = 16) => {
3 return px / rootFontSize;
4};
5
6const pxToEm = (px, parentFontSize = 16) => {
7 return px / parentFontSize;
8};
9
10const remToPx = (rem, rootFontSize = 16) => {
11 return rem * rootFontSize;
12};
13
14const emToPx = (em, parentFontSize = 16) => {
15 return em * parentFontSize;
16};
17
18const remToEm = (rem, rootFontSize = 16, parentFontSize = 16) => {
19 return rem * (rootFontSize / parentFontSize);
20};
21
22const emToRem = (em, parentFontSize = 16, rootFontSize = 16) => {
23 return em * (parentFontSize / rootFontSize);
24};
25
26// Beispielverwendung
27console.log(pxToRem(24)); // 1.5
28console.log(remToPx(1.5)); // 24
29console.log(pxToEm(24, 24)); // 1
30console.log(remToEm(2, 16, 32)); // 1
31
1:root {
2 /* Basis-Schriftgrößen */
3 --root-font-size: 16px;
4 --base-font-size: var(--root-font-size);
5
6 /* Häufige Pixelwerte in REM umgerechnet */
7 --space-4px: 0.25rem;
8 --space-8px: 0.5rem;
9 --space-16px: 1rem;
10 --space-24px: 1.5rem;
11 --space-32px: 2rem;
12 --space-48px: 3rem;
13
14 /* Typografische Skala */
15 --text-xs: 0.75rem; /* 12px */
16 --text-sm: 0.875rem; /* 14px */
17 --text-base: 1rem; /* 16px */
18 --text-lg: 1.125rem; /* 18px */
19 --text-xl: 1.25rem; /* 20px */
20 --text-2xl: 1.5rem; /* 24px */
21}
22
23/* Beispielverwendung */
24.card {
25 padding: var(--space-16px);
26 margin-bottom: var(--space-24px);
27 font-size: var(--text-base);
28}
29
30.card-title {
31 font-size: var(--text-xl);
32 margin-bottom: var(--space-8px);
33}
34
1// SCSS-Funktionen für die Einheit Umrechnung
2@function px-to-rem($px, $root-font-size: 16) {
3 @return ($px / $root-font-size) * 1rem;
4}
5
6@function px-to-em($px, $parent-font-size: 16) {
7 @return ($px / $parent-font-size) * 1em;
8}
9
10@function rem-to-px($rem, $root-font-size: 16) {
11 @return $rem * $root-font-size * 1px;
12}
13
14// Beispielverwendung
15.element {
16 padding: px-to-rem(20);
17 margin: px-to-rem(32);
18 font-size: px-to-rem(18);
19
20 .nested {
21 // Verwendung der Schriftgröße des Elternelements (18px) für die EM-Umrechnung
22 padding: px-to-em(16, 18);
23 margin-bottom: px-to-em(24, 18);
24 }
25}
26
1def px_to_rem(px, root_font_size=16):
2 """Konvertiere Pixel in REM-Einheiten"""
3 return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6 """Konvertiere REM-Einheiten in Pixel"""
7 return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10 """Konvertiere Pixel in EM-Einheiten"""
11 return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14 """Konvertiere EM-Einheiten in Pixel"""
15 return em * parent_font_size
16
17# Beispielverwendung
18print(f"16px = {px_to_rem(16)}rem") # 16px = 1.0rem
19print(f"2rem = {rem_to_px(2)}px") # 2rem = 32px
20print(f"24px = {px_to_em(24, 16)}em") # 24px = 1.5em
21
REM (Root Em) Einheiten sind relativ zur Schriftgröße des Wurzel-Elements (typischerweise das <html>
-Element), während EM-Einheiten relativ zur Schriftgröße ihres Elternelements sind. Dieser wesentliche Unterschied bedeutet, dass REM-Einheiten konsistente Größen im gesamten Dokument beibehalten, während EM-Einheiten einen kaskadierenden Effekt erzeugen können, wenn Elemente genestet sind.
Es gibt keine einzelne "beste" Einheit für alle Situationen. Eine Kombination von Einheiten ist typischerweise am effektivsten:
Der ideale Ansatz besteht darin, jede Einheit für das zu verwenden, was sie am besten innerhalb eines kohärenten Systems tut.
Die Standardgröße von 16px wurde als Lesbarkeitsstandard festgelegt, der auf Geräten gut funktioniert. Forschungen haben gezeigt, dass Text um 16px optimal für das Lesen auf Bildschirmen in typischen Betrachtungsabständen ist. Diese Standardgröße bietet auch eine gute Basis für die Zugänglichkeit, indem sichergestellt wird, dass der Text für die meisten Benutzer nicht zu klein ist.
Ja, CSS unterstützt negative Werte für viele Eigenschaften mit jedem Einheitentyp. Negative Margen, Transformationen und Positionen sind häufige Anwendungsfälle für negative Werte. Unser Converter behandelt negative Werte korrekt für alle Einheitstypen.
EM-Einheiten kumulieren sich, wenn Elemente genestet sind. Zum Beispiel:
1.parent {
2 font-size: 16px;
3}
4.child {
5 font-size: 1.5em; /* 24px (16px × 1.5) */
6}
7.grandchild {
8 font-size: 1.5em; /* 36px (24px × 1.5) */
9}
10
Dieser kumulative Effekt kann nützlich sein, um proportionale Designs zu erstellen, erfordert jedoch eine sorgfältige Verwaltung, um unbeabsichtigtes Skalieren zu vermeiden.
Hochauflösende Displays werden automatisch behandelt, wenn relative Einheiten wie REM und EM verwendet werden. Da diese Einheiten auf der Schriftgröße und nicht auf physischen Pixeln basieren, skalieren sie entsprechend auf hochauflösenden Bildschirmen. Für Bilder und Ränder sollten Sie in Betracht ziehen, Medienabfragen mit dem Gerätepixelverhältnis oder der Auflösung zu verwenden.
Die Browserunterstützung für REM und EM-Einheiten in Medienabfragen hat sich erheblich verbessert. Die Verwendung von EM-Einheiten in Medienabfragen wird im Allgemeinen empfohlen, da:
1/* Verwendung von EM-Einheiten für Medienabfragen */
2@media (min-width: 48em) { /* 768px bei 16px Basis */
3 /* Tablet-Stile */
4}
5
6@media (min-width: 64em) { /* 1024px bei 16px Basis */
7 /* Desktop-Stile */
8}
9
Die meisten Design-Tools arbeiten hauptsächlich mit Pixeln. Bei der Implementierung von Designs:
Einige Design-Tools verfügen über Plugins, die diesen Umrechnungsprozess automatisch unterstützen können.
Browser behandeln Subpixelwerte unterschiedlich. Einige Browser runden auf den nächsten Pixel, während andere Subpixel-Rendering für eine sanftere Skalierung unterstützen. Dies kann gelegentlich zu leichten Inkonsistenzen zwischen Browsern führen, insbesondere bei kleinen REM/EM-Werten oder bei der Verwendung von Transformationen. Für die meisten Anwendungsfälle sind diese Unterschiede jedoch vernachlässigbar.
Es gibt keinen signifikanten Leistungsunterschied zwischen der Verwendung von Pixeln, REM oder EM-Einheiten in modernen Browsern. Die Wahl der Einheiten sollte auf den Designanforderungen, dem responsiven Verhalten und den Zugänglichkeitsbedürfnissen basieren, anstatt auf Leistungsüberlegungen.
"CSS Values and Units Module Level 3." W3C Recommendation. https://www.w3.org/TR/css-values-3/
Marcotte, Ethan. "Responsive Web Design." A List Apart, 25. Mai 2010. https://alistapart.com/article/responsive-web-design/
Rutter, Richard. "The Elements of Typographic Style Applied to the Web." http://webtypography.net/
"CSS Units." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
"CSS Pixels vs. Physical Pixels." Stack Overflow Documentation. https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels
Coyier, Chris. "The Lengths of CSS." CSS-Tricks. https://css-tricks.com/the-lengths-of-css/
"Using CSS custom properties (variables)." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
"Understanding and Using rem Units in CSS." SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
Hören Sie auf, mit manuellen CSS-Einheit Umrechnungen zu kämpfen, und lassen Sie unseren PX, REM und EM Einheit Converter die Arbeit für Sie erledigen. Egal, ob Sie eine responsive Website erstellen, ein Designsystem erstellen oder einfach mehr über CSS-Einheiten lernen, dieses Tool wird Ihnen Zeit sparen und Genauigkeit gewährleisten. Geben Sie jetzt Ihre Werte ein, um zu sehen, wie einfach die Einheit Umrechnung sein kann!
Entdecken Sie weitere Tools, die für Ihren Workflow nützlich sein könnten