PX-EM-Umrechner

Pixel und em sind gängige CSS-Längeneinheiten, beruhen jedoch auf unterschiedlichen Größenkonzepten. Ein CSS-Pixel ist eine Referenzeinheit, mit der Browser geräteübergreifend einheitliche visuelle Maße erzeugen. Ein em bezieht sich auf eine Schriftgröße im Kontext des Elements. Bei einer Eigenschaft wie font-size verweist ein em meist auf die berechnete Schriftgröße des Elternelements. Bei vielen anderen Eigenschaften bezieht es sich auf die berechnete Schriftgröße des Elements selbst. Sobald die richtige Basis bekannt ist, ist die Rechnung einfach. Teilen Sie den Pixelwert durch die Basisschriftgröße, um em zu erhalten. Bei einer Basis von 16 Pixeln entsprechen 24 Pixel 1.5 em und 8 Pixel 0.5 em. Für die Gegenrichtung multiplizieren Sie em mit der Basis. Bei einer Basis von 20 Pixeln entsprechen 1.25 em genau 25 Pixeln. Der Rechner unterstützt beide Richtungen und setzt nicht voraus, dass jedes Design den üblichen Browserstandard von 16 Pixeln verwendet. Relative Einheiten helfen, Typografie und Abstände stimmig anzupassen, wenn Nutzer, Themes oder Komponenten die Schriftgröße ändern. Ein in em angegebener Innenabstand kann etwa mit der Beschriftung einer Schaltfläche wachsen und bei größerem Text die Proportionen wahren. Pixel bleiben für Details nützlich, die nicht genauso skalieren sollen, etwa feine Rahmen oder präzise gesteuerte Grafiken. Keine Einheit ist grundsätzlich besser; Gestaltungsziel und Vererbungskontext bestimmen die passende Wahl. Verwechseln Sie em nicht mit rem. Rem bezieht sich auf die Schriftgröße des Wurzelelements, während em einem lokalen Schriftgrößenkontext folgt und sich bei Verschachtelung multiplizieren kann. Hat ein Elternelement 1.25 em und ein Kindelement ebenfalls 1.25 em, kann die berechnete Größe des Kindes das 1.5625-Fache der ursprünglichen Basis betragen. Für eigenständige Komponenten ist das leistungsfähig, kann aber bei erwarteter Wurzelreferenz überraschen. Verwenden Sie für eine exakte Umrechnung die tatsächlich berechnete Basisschriftgröße. Browserstandards, Barrierefreiheitseinstellungen, Media Queries, vererbte Stile und Komponentenregeln können sie verändern. Entwicklertools zeigen den berechneten Wert eines bestimmten Elements. Die Zahl ist eine mathematische Entsprechung bei der gewählten Basis, keine Garantie für identisches Verhalten zweier Deklarationen in jedem responsiven oder verschachtelten Kontext. Prüfen Sie umgerechnete Stile bei verschiedenen Viewportgrößen, Zoomstufen und Nutzerschrifteinstellungen, um Lesbarkeit und Layoutverhalten zu erhalten.