| px | rem | em | pt | % |
|---|---|---|---|---|
| 1 | 0.0625 | 0.0625 | 0.75 | 6.25 |
| 2 | 0.125 | 0.125 | 1.5 | 12.5 |
| 4 | 0.25 | 0.25 | 3 | 25 |
| 8 | 0.5 | 0.5 | 6 | 50 |
| 10 | 0.625 | 0.625 | 7.5 | 62.5 |
| 12 | 0.75 | 0.75 | 9 | 75 |
| 14 | 0.875 | 0.875 | 10.5 | 87.5 |
| 16 | 1 | 1 | 12 | 100 |
| 18 | 1.125 | 1.125 | 13.5 | 112.5 |
| 20 | 1.25 | 1.25 | 15 | 125 |
| 24 | 1.5 | 1.5 | 18 | 150 |
| 28 | 1.75 | 1.75 | 21 | 175 |
| 32 | 2 | 2 | 24 | 200 |
| 36 | 2.25 | 2.25 | 27 | 225 |
| 40 | 2.5 | 2.5 | 30 | 250 |
| 48 | 3 | 3 | 36 | 300 |
| 56 | 3.5 | 3.5 | 42 | 350 |
| 64 | 4 | 4 | 48 | 400 |
Ein CSS-Einheitskonverter übersetzt eine Länge zwischen den Einheiten, die CSS für die Größenordnung und das Layout verwendet: PX, REM, EM, PT und %. Es existiert, weil sich das moderne Responsive-Design auf relativen Einheiten - REM und EM-Skalierung mit den Schriftgrößeneinstellungen und Zoom des Benutzers - stützt, während Designmodelle und ältere Stylesheets normalerweise in festen Pixeln ausgedrückt werden. Dieses Tool nimmt einen Wert wie 24px an und zeigt ihn als 1,5REM, 1,5EM, 18pt und 150% auf einmal und funktioniert in allen Richtungen aus einem einzigen Feld.
Die Konvertierungen hängen alle von einer Zahl ab: der root-(Basis)-Schriftgröße, die standardmäßig 16px ist, da dies der Browser-Standard für das HTML-Element ist. Ein REM entspricht immer der Basisschriftgröße, also bei 16px ist der Wert 16px 1REM, 24px 1.5REM und 8px 0.5Rem. Punkte sind an das CSS-Referenzpixel gebunden - 1 Zoll ist 96px und 72pt - 1pt entspricht 96/72, ungefähr 1,333px. Prozent wird als Anteil der Basisschriftgröße behandelt, also 100% entspricht der Basis und 50% entspricht der Hälfte davon.
Während der Eingabe läuft alles in Ihrem Browser, es gibt also keinen Upload, kein Warten auf einen Server und keine Begrenzung für die Anzahl der Konvertierungen. Ändern Sie die Basisschriftgröße, um eine Komponente zu modellieren, die ihre eigene Schriftgröße festlegt, lesen Sie die Ergebnisse in jeder Einheit und kopieren Sie die gewünschte. Die integrierte PX-zu-REM-Tabelle gibt Ihnen eine Referenz für die Größen, die in einer Typskala am häufigsten auftreten.
Geben Sie die Nummer ein, die Sie konvertieren möchten, und wählen Sie die Einheit aus, in der sie sich derzeit befindet - PX, REM, EM, PT oder%. Sie können auch einen Wert mit seiner Einheit wie 24px einfügen, und das Tool liest die Einheit für Sie.
Passen Sie die Root-Schriftgröße an, wenn Ihr Projekt etwas anderes als die Standardeinstellung des 16px-Browsers verwendet. Dadurch wird gesteuert, wie sich REM, EM und % auf Pixel beziehen.
Der Konverter zeigt den äquivalenten Wert in allen unterstützten Einheiten sofort an, jeweils mit seinem Einheitssuffix, sodass Sie ihn direkt in CSS ablegen können.
Kopieren Sie ein beliebiges Ergebnis mit einem Klick oder scannen Sie die Referenztabelle PX-to-REM nach den gängigen Größen in typografischer Skala.
Geben Sie einen Wert ein und sehen Sie sofort PX, REM, EM, PT und % nebeneinander, wobei jede mit der Einheit formatiert ist, damit Sie sie direkt in ein Stylesheet einfügen können.
Die Root-Schriftgröße ist einstellbar, so dass REM-, EM- und %-Konvertierungen Ihrem Projekt entsprechen - unabhängig davon, ob Sie den Standard 16px, einen Trick "62,5%" von 10 Pixel oder eine Schriftgröße auf Komponentenebene verwenden.
Es gibt kein festes "von" und "bis". Konvertieren Sie PX in REM, REM in PX, PX in EM oder PT in PX - jede Einheit in eine beliebige Einheit - von einem einzelnen Eingang.
Eine integrierte Tabelle listet die REM-, EM-, PT- und%-Äquivalente für die Pixelgrößen auf, die in Typskalen am häufigsten angezeigt werden, sodass Sie eine ganze Skala an der ausgewählten Basis betrachten können.
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
Create beautiful CSS gradients with live preview
Convert length, weight, temperature, area, volume, speed, time, data, pressure, energy, and angle units instantly with exact conversion factors
0 comments
No comments yet. Be the first to share your thoughts!