Die wichtigsten CSS Einheiten erklärt

Teile den Beitrag

Share on facebook
Share on linkedin
Share on twitter
Share on email

Es stehen uns viele Einheiten in CSS und HTML zur Verfügung, mit denen Elemente wie font-size oder padding angepasst werden können. Doch viele Leute sind damit nicht vertraut und verwenden deshalb hauptsächlich die bekannteste Einheit, das Pixel (px). Dabei sind viele Einheiten wie em oder vw in vielen Situationen sehr nützlich. Übrigens: Laut Duden heißt es „das Pixel“ und nicht „der Pixel“.

Was ist eigentlich ein Pixel?

Das Pixel ist die wohl am meisten verwendete Einheit. Dennoch wissen viele gar nicht, wie ein Pixel eigentlich funktioniert. So ist ein CSS-Pixel nicht etwa dasselbe Pixel, wie es in unserer Bildschirmauflösung zu finden ist. Dies ist auch nicht anders erwünscht, da Pixel andernfalls stark zwischen verschiedenen Geräten variieren würden. Denn ein Smartphone kann dieselbe Auflösung besitzen wie ein Computerbildschirm, obwohl der Bildschirm des Smartphones viel kleiner ist. Dementsprechend wäre 1 Pixel auf dem Smartphone kleiner als auf dem Computerbildschirm.

Tatsächlich wird für CSS ein sogenanntes „Referenzpixel“ verwendet, welches in den w3c-Spezifikationen wie folgt definiert wurde:

Das Referenzpixel ist der Sichtwinkel eines Pixels auf einem Gerät mit einer Pixeldichte von 96dpi bei einem Leseabstand von 70cm […].

Kurz gesagt: das CSS-Pixel ist eine willkürlich gewählte Längeneinheit. 1px enspricht unter den oben beschriebenen Vorraussetzungen 0,0213° des Sichtfelds eines Lesers, oder 0,26mm.

Warum etwas anderes als Pixel?

Wie soeben besprochen, ist das Pixel also eine absolute Längeneinheit. Das bedeutet, dass das Pixel für den Internetbrowser immer dieselbe Länge hat. Und hier wird ein Problem des Pixels deutlich. Und zwar bedeutet dies lange nicht, dass ein Pixel gleich ein Pixel ist. Weder der Internetbrowser, noch der Webseitenbetreiber weiß, wie groß ein Pixel auf dem Bildschirm des Nutzers in der realen Welt ist.

Während für den Browser (also Firefox, Chrome etc.) ein Pixel also immer gleich lang ist, ist ein Pixel auf dem Smartphone dennoch viel kleiner als ein Pixel auf dem PC-Bildschirm. Ein Pixel kann auf dem selben Gerät sogar größer oder kleiner werden, indem man das Gerät näher an die Augen hält.

Während es keine Einheit gibt, welche imstande ist, auf allen Geräten einheitlich dieselbe reale Länge wiederzugeben, gibt es in CSS-Einheiten, welche der obigen Problematik aus dem Weg gehen.

Wichtige relative Einheiten

Wie bereits erwähnt, sind theoretisch alle digitalen Einheiten abhängig vom Wiedergabemedium. Doch in diesem Artikel behandeln wir Einheiten, die auch bei der Berechnung des Webseitenlayouts konkret von anderen Faktoren abhängig sind.

%

Die wohl einfachste relative Einheit in CSS ist %. Sie wird hauptsächlich für Parameter wie width, height, margin oder padding verwendet.

Mithilfe von Prozenten kann ich beispielsweise diesen Paragraphen nur über die Hälfte der Seite anzeigen. Dies geht ganz einfach mit dem folgenden Code: width: 50%.

Der Vorteil an der Sache ist, dass ich nun mein Layout unabhängig von der tatsächlichen Bildschirmgröße definieren kann. Viele Blogs nutzen beispielsweise eine Sidebar, welche 1/3 des Platzes einnehmen.

blog 33 66% float left right

table cells

Subscribe To Our Newsletter

Get updates and learn from the best

Explore

Möchten Sie Ihr Unternhemen pushen?

Schreiben Sie uns und bleiben Sie in Kontakt

small_c_popup.png

Let's have a chat

Erfahren Sie, wie wir 100 Top-Marken zum Erfolg verholfen haben.