CSS-Einheitskonverter

Ein CSS Unit Converter übersetzt eine Länge zwischen den Einheiten, die CSS für Dimensionierungstyp und Layout verwendet: px, rem, em, pt und %. Es existiert, weil modernes responsives Design auf relativen Einheiten basiert - rem und em skalieren mit den Schriftgrößeneinstellungen und dem Zoom des Benutzers - während Design-Mockups und ältere Stylesheets normalerweise in festen Pixeln ausgedrückt werden. Dieses Tool nimmt einen Wert wie 24 px an und zeigt ihn als 1,5rem, 1,5 em, 18 pt und 150% auf einmal an und arbeitet in jede Richtung aus einem einzigen Feld.

Die Konvertierungen hängen alle von einer Zahl ab: der root (base) Schriftgröße, die standardmäßig auf 16 px steht, weil das die Browservorgabe für das html-Element ist Ein rem entspricht immer dieser Basisschriftgröße, also ist bei 16 px der Wert 16 px 1rem, 24 px 1,5 rem, und 8 px ist 0,5 rem. Punkte sind an das CSS-Referenzpixel gebunden - 1 Zoll ist 96 px und 72 pt - also entspricht 1 ppt 96/72, etwa 1,333 px. Prozent wird als Anteil der Basisgröße von 5% behandelt, also entspricht 10%.

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.