px ist die Längeneinheit Pixel in CSS. Laut CSS Values 4 ist ein px genau ein 96stel Zoll, also eine absolute Einheit wie cm und pt. Mit den Bildpunkten des Bildschirms ist er nur noch lose verbunden: Auf einem hochauflösenden Display entfallen auf einen CSS-Pixel mehrere Gerätepixel.
- Px
Die CSS-Längeneinheit Pixel, festgelegt als ein 96stel Zoll und nicht gleich einem Bildpunkt des Bildschirms.
Beispiel: „Der Rahmen misst 1 px und bleibt auf dem Smartphone so fein wie am Monitor.“Auch: CSS-Pixel, Referenzpixel.
Abgrenzung zum Pixel des Bildschirms: Er ist ein physischer Bildpunkt.
Der Referenzpixel
CSS Values 4 beschreibt einen Referenzpixel: den Sehwinkel, den ein Pixel auf einem Gerät mit 96 dpi auf Armlänge einnimmt, rund 0,26 Millimeter. Browser runden das auf eine ganze Zahl Gerätepixel. Deshalb wirkt 1px auf jedem Gerät ähnlich groß, auch wenn die physischen Pixel sehr verschieden sind. Wie viele Gerätepixel auf einen CSS-Pixel kommen, verrät devicePixelRatio.
px gestern und heute
Ganz am Anfang war das anders: CSS2 von 1998 nannte noch 90 dpi als Bezug, und der Pixel hing von der Auflösung ab. Mit CSS 2.1 von 2011 wurde das Verhältnis fest: 96 Pixel sind ein Zoll, weil zu viele Seiten bereits davon ausgingen. Seitdem sind 16px genau 12pt.
px oder rem
Für Schriftgrößen empfiehlt sich meist rem, weil es die Schriftgröße übernimmt, die Nutzer im Browser eingestellt haben. Für Rahmen, feine Linien und Schatten bleibt px sinnvoll, weil sie nicht mit der Schrift wachsen sollen. Zoomen funktioniert mit beiden Einheiten.
body { font-size: 1rem; }
.karte { border: 1px solid #c3cfe0; }