Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

CSS-Maßeinheiten: Über das Pixel hinaus

Mit unserer Mini-Serie für Web-Entwickler „WebDev hands on“ geben wir euch in Kooperation mit Microsoft modern.ie spannende Einblicke in Developer-Themen. Heute geht es um CSS-Maßeinheiten und den richtigen Umgang mit ihnen.

Wenn wir in Web-Dokumenten mit CSS arbeiten, verwenden wir oft die Basisgröße für Bildschirme, das Pixel – ein quadratischer, unteilbarer Teil jedes Displaygeräts (nun, zumindest visueller Displays), der kleine Lichtquellen in einem regelmäßigen, rechtwinkligen Raster verteilt. Ein Großteil der Arbeit eines Webentwicklers besteht darin, pixel-genaue Webseiten von Designs zu erstellen, die ihm in einem pixel-basierten, statischen Bildformat geliefert wurden. Daher vergessen wir gerne, dass das Web mit CSS mehr als nur Pixelwerte bietet, um Längen oder Größen auszudrücken. Dieses Wissen ist grundlegend, wenn man es mit einem Responsive Webdesign zu tun hat, bei dem das Verständnis entscheidend ist, wie CSS-Längenangaben funktionieren, um Objekten die korrekte Größe zuzuweisen und Elemente richtig auf der Seite auszurichten.

In diesem Artikel werde ich mir diese Maßeinheiten ansehen und beschreiben, wie sie sich verhalten und auf Elemente im Dokument angewendet werden können. (Denkt daran, dass auch eine ganze Menge Buchschriftsätze in CSS gemacht werden. Wir haben also nicht nur mit HTML-Dokumenten zu tun.)

Zu beachten: Um mehr über Basisgrößen zu erfahren, könnt ihr darüber lesen, wie verschiedene Einheiten im angloamerikanischen Maßsystem und im metrischen Maßsystem definiert sind

Relative und Absolute Einheiten

Beim Messen ist jede Länge in Relation zu irgendeiner Basisgröße ausgedrückt. Alle Maßsysteme bieten eine Reihe vorbestimmter Einheiten, mit denen man alle anderen Einheiten vergleicht beziehungsweise Messgeräte kalibriert.

In CSS können Einheiten absolut oder relativ sein, das hängt davon ab, ob ihre Basisgröße wiederum abhängig von dem Kontext ist, in welchem sie benutzt wird. Für Computerbildschirme ist die Basisgröße das Pixel, zu der alle anderen Einheiten umgerechnet werden, wenn Objekte schließlich auf dem Bildschirm dargestellt werden. Obwohl das Pixel wie eine relative Einheit behandelt wird, ist es doch abhängig von zwei Parametern: Der physischen Größe des Displays und seiner Auflösung. Ich werde weiter unten im Artikel darauf eingehen, in welcher Beziehung Pixel zu physischen Einheiten stehen.

Andere Einheiten, wie beispielsweise Prozent (mit dem %-Zeichen notiert), sind von dem Kontext abhängig, in dem sie benutzt werden. Mit ihnen kann ein Teil der Breite oder der Höhe eines Containers oder ein Teil der aktuellen Schriftgröße beziehungsweise des aktuell gesetzten Zeilendurchschusses ausgedrückt werden.

Aber lasst uns zuerst über absolute Einheiten sprechen.

Absolute Längeneinheiten in CSS

Absolute Einheiten in CSS (siehe Tabelle 1) drücken eine Länge aus, die unabhängig vom Kontext ist, in dem sie benutzt wird – ein Zentimeter ist ein Zentimeter, egal wo er gemessen wird. Es gibt allerdings eine Diskrepanz, wenn ihr andere absolute Einheiten als Pixel verwendet. Die Rede ist von der Punktdichte des Displays.

Tabelle 1: Verfügbare Absolute Einheiten in CSS

Verfügbar in
Bezeichnung Symbol CSS2.1 CSS3 Entsprechende Pixelgröße
Zentimeter cm Ja Ja 1 cm ~ 37.795 px
Millimeter mm Ja Ja 1 mm ~ 3.780 px
Inch (Zoll) in Ja Ja 1 in. ~ 96 px
Punkt pt Ja Ja 1 pt ~ 1.333 px
Pica pc Ja Ja 1 pc ~ 16 px

Ein Display hat eine Besonderheit, die in einer Pixel-per-Länge-Einheit gemessen wird. Die Konvention dabei ist, die Einheit Inch als Basislängeneinheit zu nehmen und dann zu messen, wie viele Pixel auf dem Display in die Einheitslänge passen (ausgedrückt durch "dots per inch", oder DPI). Wie ihr euch vielleicht denken könnt, haben verschiedene Displays verschiedene Punktdichten.

Ein typisches HDTV-Display hat eine Auflösung von 1920 x 1080 Pixel und beispielsweise eine physische Größe von 40 x 22.5 Inch. Nehmt nun beide Maße und teil die Pixel durch die Länge, dann bekommt ihr die Punktdichte des Displays in DPI:

1920 px / 40 in. = 48 DPI

Ein niedriger DPI-Wert sagt euch, dass die Pixel auf diesem Display ziemlich groß sind, weil ein Fernsehbild normalerweise aus einer gewissen Entfernung aus betrachtet wird, was die Pixel kleiner erscheinen lässt.

Im Gegensatz dazu stehen Mobilgeräte, von denen man beim Einsatz noch nicht einmal eine Armlänge entfernt ist. Dennoch müssen sie mit ihrer handlichen Größe genug Auflösung bieten, dass Buchstaben noch lesbar sind – andernfalls wird der Anwender wegen der extrem niedrigen Auflösung zum Schlüssellochbrowsen gezwungen. Er muss dann über das gesamte Dokument scrollen, anstatt einen ganzen Textblock auf einmal zu sehen.

Der momentane Wachstumsschub von High-End-Mobilgeräten gipfelte in den Displays mit hohen Punktdichten, wie sie in verschiedenen Windows-Phone-, Android- und iOS-Geräten verwendet werden. Das Retina-Display ist eines der ersten dieser Hoch-DPI Displays. Seine ursprüngliche Auflösung war 960 x 640 Pixel und es hatte eine Bildschirmdiagonale von 3.5 Inch. Die Punktdichte liegt also bei 326 DPI. Dieser Wert ist siebenmal höher als der eines hochauflösenden TV-Geräts.

Wenn ihr die DPI eines Displays kennt, dann könnt ihr die Länge in Pixel ermitteln, indem ihr die Länge durch die DPI teilt. Nehmen wir einmal an, ihr habt ein zugeschnittenes Bild von 2 x 1.5 Inch, das ihr auf dem Fernseher anzeigen wollt:

2 in. ? 48 DPI = 96 px
1.5 in. ? 48 DPI = 72 px

Ein 96 x 72 Pixel  großes Bild würde auf dem Fernseher nur einen kleinen Teil der Displayfläche einnehmen, aber es würde genau so groß dargestellt werden wie das physische Originalbild. Wenn man das Bild aber auf dem Retina-Display darstellt, bekommt man ein ganz anderes Ergebnis.

2 in. ? 326 DPI = 652 px
1.5 in. ? 326 DPI = 489 px

Wenn man nur die Pixelgröße in Betracht zieht, könnte man meinen, dass das Bild auf dem Retina-Display 6,8-mal so groß dargestellt würde wie das Bild auf dem Fernseher. Interessanterweise wird das Bild aber auf beiden Displays genau so groß angezeigt wie das physische Original.

Wenn ihr jedoch auf Webseiten absolute Einheiten verwendet, bekommt ihr so gut wie immer andere Ergebnisse. Ein Zentimeter-großes Bild wird auf verschiedenen Displays verschieden groß dargestellt. Es erscheint groß auf einem Fernseher und klein auf einem Mobilgerät. Es gibt zwei Gründe für dieses Verhalten: Einer ist historisch bedingt, der andere ist Lesbarkeit.

In Sachen Lesbarkeit wäre es sinnlos, Dokumente auf verschiedenen Displays in ihrer physischen Originalgröße darzustellen, denn man sieht oder liest diese Displays ja nicht aus der gleichen Entfernung. Außerdem würde die Punktdichte auf großen Displays Dokumente leicht unscharf aussehen lassen, während das selbe Dokument, dargestellt auf kleineren Geräten, zu viel Platz einnehmen würde.

Um dies zu kompensieren, haben Programmierer von Betriebssystemen schon früh einen festen DPI-Wert angenommen, der absolute Einheiten direkt auf Pixel abbildet, und den echten DPI-Wert des Geräts ignoriert. Apple hat zuerst einen DPI-Wert von 72 angenommen, während sich Microsoft für 96 entschieden hat. Irgendwann haben alle 96 DPI als die Norm akzeptiert, sogar bei Browsern.

Diese festen Werte gelten allerdings nur für Bildschirme und Displays (Medientypen, die mit den Begriffen Screen oder Scannen verbunden werden). Drucker und ähnliche Ausgabegeräte arbeiten mit den korrekten absoluten Einheiten. Nur so kann man sich darauf verlassen, dass ein Druck-Layout genau so ausgedruckt wird, wie es entworfen wurde, ganz unabhängig vom Druckertyp oder der Druckermarke.

Bitte beachte unsere Community-Richtlinien

2 Reaktionen
Pascal Welsch

Schade, dass es in CSS3 nicht eine einheit wie DIP (Density Independent Pixel) bei Android gibt. bei 160dpi ist das genau 1dp = 1px. bei 320dpi dann 2px ...

mit cm in em... kann man ja leider nicht arbeiten.

hier mal noch ein guter artikel dazu. http://alistapart.com/article/a-pixel-identity-crisis

Antworten
DerFreeman

Sehr schön erklärt. Danke!

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.