Die wichtigsten CSS Einheiten erklärt

Share on facebook
Share on whatsapp
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

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Share this post with your friends

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on reddit
Share on xing

Leave a Reply

Your email address will not be published. Required fields are marked *