Anzeige
Anzeige
News
Artikel merken

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.

Von Klemen Slavic
13 Min. Lesezeit
Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

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

Anzeige
Anzeige

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.

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

Anzeige
Anzeige

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.

X-Height (ex)

Ähnlich wie bei ems bezeichnet X-Height die Höhe des Buchstaben X in der aktuellen Schriftart. Dieser Wert ist ebenfalls im Font selbst definiert, aber er wird momentan von den Browsern nur geschätzt, und zwar auf die Hälfte eines em.

Für X-Height gelten die gleichen Regeln wir für em. Bitte lest im vorherigen Absatz über die entsprechenden Ausnahmen.

Viewport-Breite (vw) und Viewport-Höhe (vh)

Solltet ihr jemals versucht haben, Elemente zu verwenden, deren Größe relativ zum Viewport stehen, dann habt ihr bisher praktisch nur zwei Möglichkeiten gehabt: Entweder Elemente als direkte Kindelemente an den <body>-Tag hängen und dann Größen mit Prozentangaben setzen. Oder bei allen Elementen Prozentangaben verwenden und dann rückwärtsrechnen, um die jeweilige Reduzierung zu berücksichtigen.

Um Größen relativ zum Viewport zu bekommen, könnt ihr nun die Viewport-Breite (vw) und die Viewport-Höhe (vh) verwenden, und zwar mit jedem beliebigen Element, egal wie tief in der Hierarchie es sich befindet. Die Einheit wird immer einen Prozentwert zum aktuellen Viewport bezeichnen. Um beispielsweise eine Box zu erstellen, die halb so breit und halb so hoch ist wie der Viewport, verwendet ihr einfach:

#mydiv { width: 50vw; height: 50vh; }

Im Gegensatz zu Prozentangaben verändert sich der Messkontext für den Viewport nie. Ihr könnt diese Einheit daher überall verwenden, ohne Angst haben zu müssen, dass sich seine Größe durch eine vererbte Größe verändern könnte.

Kleinere Viewport-Dimension (vmin)

Diese Einheit verhält sich genau wie die Viewport-Breite und die Viewport-Höhe, aber mit einer Spezialität: Sie bezieht sich immer auf den Wert der kleiner ist: Viewport-Breite oder Viewport-Höhe. Um die Wirkweise zu demonstrieren, nehmt ihr einen einfachen div und verwendet die Einheit Viewport-Dimension (vmin) in seinen Größenangeben.

#mydiv { width: 100vmin; height: 100vmin; }

Wenn Sie sowohl Breite als auch Höhe auf diese Weise setzen, erhalten Sie ein Quadrat, das exakt in den Viewport passt, jedoch niemals seinen Inhalt abgeschnitten darstellen muss, was quasi das größtmögliche Quadrat erstellt, das in den Viewport paßt.

Breite von 0 (ch)

Dies ist eine weitere Einheit, die für Typografie gedacht ist. Sie misst jedoch nicht die Höhe, sondern die Breite des Schriftzeichens 0 (Ziffer Null). Wenn der aktuell verwendete Schriftsatz dieses Zeichen nicht enthält, nimmt die Einheit als Wert die durchschnittliche Breite aller Zeichen. Die Spezifikation ist derzeit ein bisschen unklar darüber, wie der Wert gemessen werden soll. Zum Beispiel empfiehlt sie als Standardwert den Wert von 0.5 em zu nehmen, wenn es das Zeichen 0 nicht im Font gibt.

Die Einheit ch ist sehr hilfreich, um horizontale typografische Raster zu definieren, da das Vielfache dieser Einheit in etwa der Breite einer Zeichenkette der selben Anzahl von Buchstaben entspricht. Hier ist ein Beispiel für eine Spalte, in die ungefähr 40 Zeichen pro Zeile passen:

#mycolumn { width: 40ch }

m-Höhe des Wurzelelements (rem)

Manchmal ist es nützlich, sich von einer beliebig tiefen Stelle in der Hierarchie aus auf die ursprüngliche Schriftgröße zu beziehen und Schriftgrößen relativ zum Wurzelelement zu setzen. Um diesen Verwendungszweck zu zeigen, könnt ihr die Einheit rem benutzen, die sich immer auf den Wert für font-size im <body>-Element bezieht:

#mydiv { font-size: 2rem; }

Der Text in diesem Element wird immer zweimal so groß sein, wie der Text direkt im <body>-Element, egal wo in der DOM-Baumstruktur ihr das Element platziert.

Zur Kompatibilität

CSS3 geht es nicht anderes als anderen brandneuen Techniken: Obwohl Webbrowser nach und nach die Funktionalitäten und Merkmale von CSS3 implementieren, sind manche der im Artikel beschriebenen Einheiten zugunsten der implementierten Features bisher auf Eis gelegt worden. Der Browser, der momentan die meisten besprochenen Längeneinheiten unterstützt, ist Google Chrome, der seit dem Change Set im März 2012 die Einheiten vw, vh und vmin kennt.

Der Internet Explorer hat seine Unterstützung auch beträchtlich verbessert, seit der Internet Explorer 9 und höhere Versionen die Einheiten vw, vh und rem unterstützen, wie hier gezeigt. Auch Gecko unterstützt seit der Version 1.9.2 die Einheit rem.

Ich befürchte, dass ihr diese Einheiten nicht verwendet und dann bei einzelnen, nicht unterstützten Einheiten zurückschalten könnt. Denn das Verhalten dieser Einheiten lässt es nicht zu, sie mithilfe anderer Einheiten und ohne JavaScript zu emulieren. Trotzdem erlauben euch responsives Webdesign und progressive Verbesserung, dass ihr euch auf sinnvolle Voreinstellungen und Alternativen verlassen könnt, sollten diese Einheiten nicht verfügbar sein. Notiert euch einfach, wie im folgenden Beispiel, die alternative Größe im CSS-Code zuerst und erst danach die eventuell nicht-unterstützte Einheit:

#mycolumn {
  width: 320px;
  width: 40ch;
 }

In diesem Fall verwendet der Browser, statt der Einheiten die er nicht versteht, einfach den vorher angegebenen Wert. Nachdem einige der frühen Implementierungen dieser Einheiten bei verschiedenen Browsern zu unterschiedlichem Verhalten führen, solltet ihr diese ausgiebig testen. So findet ihr heraus, wo ihr Rückfallfunktionen oder Workarounds einsetzen müsst.

Über den Autor

Klemen Slavic ist ein Front-End-Engineer bei Celtra Inc., wo er an Celtras Selbstbedienungs-Werbe-Web-Anwendung und mobilen Apps arbeitet. Er besitzt ein MCT- und ein MCPD-Web-Zertifikat und ist auch ein ACE in Photoshop. Er befürwortet offene Webtechniken.

Klemen begann 1996 zu programmieren, als er Fraktalrenderer in Logo und BASIC für die Windows-Umgebung mit Visual Basic 6 geschrieben hat, bis er sich schließlich dem Web zuwendete. Er hat sich in HTML, CSS und JavaScript verliebt, was zurzeit der Mittelpunkt seiner professionellen Arbeit und auch seines Hobbys ist.

In seiner Freizeit bleibt er gerne auf dem Laufenden, was verschiedene neue Webtechniken, Closed- oder Open-Source, betrifft oder er vergnügt sich an medial reichhaltigen Projekten und Vorführungen. Um sich einen Überblick über seine Arbeiten zu verschaffen, könnt ihr euch seine about.me-Seite ansehen.

Hier findet ihr Klemen:

Blog: animalija.sopca.com
Twitter: @krofdrakula
Delicious: krof.drakula

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
4 Kommentare
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

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!
Hallo und herzlich willkommen bei t3n!

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

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

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige