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%.

Jede Konvertierung dauert zwei Schritte Das Tool dreht zuerst Ihre Pixel, indem es sie mit der Anzahl der Pixel in einer Eingabeeinheit multipliziert, teilt dann diesen Pixelwert durch die Anzahl der Pixel in einer Zieleinheit auf. Bei einer 18px-Basis wird 27 p zu 27 18 = 1,5rem, und an jeder Basis wird 12pt zu 1 ̄NF 96 = 16px Die Ergebnisse werden auf höchstens vier Dezimalstellen gerundet, sodass 15px bei einer Basis von 16px 0,9375. Viewport-Einheiten wie z. vpw und vh. Die Schriftgröße ist nicht Teil des Rückwandlers.1.

Alles läuft in Ihrem Browser, während Sie tippen, so dass es keinen Upload und kein Warten auf einem Server gibt Ä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, die Sie benötigen Die integrierte px-to-rem-Tabelle bietet Ihnen eine fertige Referenz für die Größen, die in einer Typskala am häufigsten auftauchen.