Pixel, EM, REM, %, VW, VH – Was ist der Unterschied?

Wenn du mit Wordpress arbeitest (und auch sonst im Webdesign) wirst du diese Begriffe häufig finden. Aber was bedeuten diese Optionen eigentlich und wann solltest du welche verwenden?

Pixel (px)

Die Pixel (px) sind absolute Einheiten (obwohl sie relativ zur Auflösung des Anzeigegeräts sind). Das heisst: Wenn du dein Bild 500px breit setzt, wird das Bild auch tatsächlich diese Breite haben. Egal wie gross oder klein andere Elemente sind. Pixel zu verwenden kann jedoch in der Responsivität etwas mühsam sein.

Die folgenden Einheiten sind etwas besser, wenn’s um Responsivität geht. Sie beziehen sich nämlich immer auf eine andere Grösse, sind also relative Einheiten.

EM

EM: Eine Grösse, die relativ zum Parent-Element ist. Zum Beispiel die Spalte, in der das Elementor-Widget liegt.

REM

REM: Eine Grösse, die relativ zum Root-Element ist. Zum Beispiel deine Einstellung in den Site Settings.

%

%: Die Breite oder Höhe im Verhältnis zum Eltern-Element.

VW

VW: Steht für Viewport-Width, bezieht sich also auf die Breite des Browser-Fensters.

VH

VH: Steht für Viewport-Height, bezieht sich also auf die Höhe des Browser-Fensters.

Beispiel

Du kannst in Wordpress Schriftgrössen in Pixel, EM oder REM wählen. In den Site Settings ist die Schriftgrösse für p auf 10px festgelegt. In einer Spalte haben wir festgelegt, dass die Schriftgrösse 15px betragen soll (selector {font-size:15px;}). Dann platzieren wir in dieser Spalte ein Textfeld.

• Wenn wir die Schriftgrösse in px angeben, hat die Schrift diese absolute Grösse.
• Wenn wir die Schrift auf 1.5rem setzen entspricht das dem 1.5-fachen der Site Settings (weil Root-Element), in diesem Fall ist die Schrift also 15px gross.
• Wenn wir die Schrift auf 2em setzen entspricht das dem 2-fachen der definierten Grösse in der Spalte (weil Parent-Element), in diesem Fall ist die Schrift also 30px gross.

Ein Beispiel zu %: Wenn du ein Bild platzierst und dessen Breite auf 50% definierst, ist das Bild immer halb so breit wie die Spalte, in der es drin liegt.

VW und VH: Wenn du die Grösse eines Elements definierst, beziehen sich VW und VH immer auf die Grösse des Fensters. 50vw heisst, dass ein Element halb so breit ist wie das Browserfenster, 50vh logischerweise halb so hoch.