Entwicklung & Design

CSS-Maßeinheiten: Über das Pixel hinaus

Seite 2 / 3

Relative Längeneinheiten in CSS

Im Unterschied zu absoluten Einheiten haben relative Einheiten in CSS (siehe Tabelle 2) keine festen Werte, mit denen sie verglichen werden. Einige sind relativ zum Container, in dem sie verwendet werden, andere zur ganzen Displaygröße (und damit meine ich Breite und Höhe des Viewports). Die einzige relative Einheit, die durchgehend gleich groß dargestellt wird, unabhängig vom verwendeten Browser oder Display, ist das Pixel (und auch das ist ein wenig geschwindelt, wenn man Displays mit hoher Punktdichte verwendet, wie ich später erläutern werde).

Tabelle 2: Relative Einheiten in CSS und ihre Beziehung zum Bezugselement.

Bezeichnung Symbol Verfügbar in Relativ zu
CSS2.1 CSS3
Pixel px Ja Ja Bildschirmauflösung – Zu beachten: Es gibt kein festes Größenverhältnis zwischen Gerätepixel und CSS-Pixel auf Displays mit hoher Punktdichte – Browser bieten den Wert window.devicePixelRatio womit ihr ermitteln könnt, wie viele Gerätepixel in ein CSS-Pixel auf der Zoom-Stufe 1:1 passen.
Prozent % Ja Ja Container, wenn es für Dimensionen verwendet wird, oder dem Font des Containers, wenn es im Zusammenhang mit font-size oder line-height verwendet wird. Prozent zeigt keinen Effekt, wenn es mit letter-spacing verwendet wird.
Em em Ja Ja Schriftgröße des Elements, außer es wird mit font-size selbst verwendet, dann bezieht es sich auf die Schriftgröße des Elternelements.
X-height ex Ja Ja Schriftgröße des Containers (entspricht etwa 0.5 em).
Breite des Viewport vw Nein Ja Viewport
Höhe des Viewport vh Nein Ja Viewport
Kleinere Viewportgröße min Nein Ja Viewport
Breite von 0 ch Nein Ja Schriftart des Containers
m-Höhe des Wurzelelements (Root element m-height) rem Nein Ja Schriftart des Wurzelelements
Grid gd Nein Ja Text-Grid eines Containers (siehe CSS3 Text Module)

Pixel (px)

Die Einheit Pixel ist immer relativ zum physischen Pixel auf dem verwendeten Display. Ein 20 x 20 Pixel großes Rechteck wird immer in den selben Pixelgrößen dargestellt werden, ungeachtet des Displaytyps.

Retina- oder High-End Android-Displays stellen Webseiten in einem Vielfachen seiner Pixelauflösung dar. Um die Auflösung dieser Displays voll auszunutzen, könnt ihr übergroße Bilder verwenden und sie herunterskalieren, um sie auf solchen Geräten schärfer erscheinen zu lassen.

Das Apple-Retina-Display beispielsweise hat genau doppelt so viele DPI wie die Displays älterer iPhones. Der Browser stellt alle Pixelangaben in doppelter Größe dar, ein 20×20-Pixel-Rechteck wird also mit 40 x 40 Pixel angezeigt, um die höhere Punktdichte zu kompensieren (bei 1:1 Zoom, Die Verwendung des Zwei-Finger-Zooms bei einer Webseite verzerrt dieses Verhältnis)

Andere Gerätehersteller sind mit ihren eigenen Versionen von Displays mit hohen Pixeldichten nachgezogen, speziell High-End-Android-Geräte, deren Pixeldichten beträchtlich variieren und das gesamte Spektrum von 100 bis 350 DPI abdecken. Als Folge dessen nehmen Browser auf diesen Geräten diese Werte und bleiben bei einer der üblichen Viewport-Breiten auf einem ansonsten beliebig breiten Display. Ihr könnt das Verhältnis zwischen Gerätepixel und CSS-Pixel mit der JavaScript-Eigenschaft window.devicePixelRatio ermitteln oder DPI Media Queries verwenden, die euch erlauben, in der Webseite weitere CSS-Eigenschaften zu setzen.

Daraus folgt, dass Pixel im Web fast nie in der Größe der Gerätepixel dargestellt werden. Pixel sollten deshalb als relative Einheit betrachtet werden. Es gibt allerdings eine obere Grenze, wie dicht Pixel in zukünftigen Geräten zusammengepackt werden: Das menschliche Auge ist bei mehr als 300 DPI und einem Abstand einer Armlänge üblicherweise nicht mehr fähig, die einzelnen Pixel aufzulösen. Zurzeit wird nicht erwartet, dass zukünftige Geräte die Auflösung über diesen Wert hinaus erhöhen werden, da dies keine merkliche Verbesserung in der Displayschärfe bringen würde.

Prozent (%)

Prozentangaben sind wahrscheinlich die bekanntesten Einheiten beim Webdesign, da sie sich die Fähigkeit von Proportionen zu Nutze machen, um Dokumente gemäß dem ihnen verfügbaren Platz fließen zu lassen. Prozentangaben werden überwiegend in fließenden Layouts für Webseiten verwendet. Hier wird versucht, einen für alle Situationen passenden Wert zu finden, indem nur Proportionen relativ zur Containergröße oder der vererbten Schriftgröße definiert werden.

Zu beachten: CSS3 erlaubt euch das Box-Model über box-sizing zu bestimmen

Diese Einheit ist einfach zu verstehen: Wenn ihr mit den Größen des Box-Models arbeitet, ist die Einheit immer relativ zu den Größen des Elternelements. Standardmäßig schließt das die Größe der Inhaltsbox ein, aber nicht die Angaben zum Innenabstand (padding) oder zur Randdicke (border).

Schriftmaße auf CSS-Attribute abgebildet

Bild 1. Schriftmaße auf CSS-Attribute abgebildet

Wenn ihr diese Einheit im Zusammenhang mit typografischen Größenangaben verwendet, wird jede Angabe anders behandelt (siehe Bild 1 für die verschiedenen Angaben):

  • font-size: Relativ zur vererbten Schriftgröße.
  • line-height: Relativ zur Schriftgröße des aktuellen Elements.
  • letter-spacing: Hat keinen Effekt.

Wenn ihr line-height definiert, seid euch bitte bewusst, dass diese immer relativ zur aktuellen Schriftgröße ist, und nicht zur line-height des Containers.

p { font: normal 16px/200% serif; }

Das obige Beispiel berechnet line-height auf 32 px, ungeachtet der line-height des Containers.

Ems (em)

Ems ist eine sehr praktische typografische Einheit, die ihr Maß auf die Schriftgröße des aktuellen Elements bezieht. Ursprünglich wurde diese Einheit dazu verwendet, Längen relativ zu der Breite des Buchstaben M (ohne die Unterschneidung) auszudrücken. Sie hat sich aber weiterentwickelt, um auch nicht-lateinische Schriften zu umfassen, und ist nun als eine willkürliche Einheit definiert, gesetzt durch den Font-Designer und in den Font selbst einprogrammiert.

Zwei Schriftarten dargestellt in der selben Schriftgröße und an der Baseline ausgerichtet (links: News Gothic, rechts: Garamond)

Bild 2. Zwei Schriftarten dargestellt in der selben Schriftgröße und an der Baseline ausgerichtet (links: News Gothic, rechts: Garamond)

Auch wenn man die selbe absolute Größe verwendet, kann die sichtbare Höhe von einer Schriftart zur anderen unterschiedlich sein (siehe line-height in Bild 1). Dies ist jedoch ein rein optischer Effekt, weil sich das vertikale Maß (Position der Schriftlinie) nicht verändert, auch wenn die Schriftart geändert wird (siehe Bild 2).

Wenn ems auf das Wurzelelement des Dokuments angewendet werden, um die Schriftgröße zu definieren, ist die Größe relativ zum Ausgangswert – mit anderen Worten dem Standardwert des Browsers, wie er in den Einstellungen des Benutzerprofils gesetzt ist.

Genau wie bei Prozentangaben, hängt der Benutzungskontext für ems davon ab, für welche CSS-Eigenschaft ihr die Einheit verwendet. Ems sind für alle CSS-Eigenschaften immer relativ zur Schriftgröße des aktuellen Elements. Die einzige Ausnahme ist font-size selbst, die immer relativ zur Schriftgröße seines Elternelements ist.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

4 Kommentare
DerFreeman
DerFreeman

Sehr schön erklärt. Danke!

Antworten
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

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

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung