Wenn du mit dem Elementor arbeitest (und auch sonst im Webdesign) werden dir diese Begriffe begegnen. Aber was bedeuten diese Optionen eigentlich und wann sollte man welche verwenden?
PX: 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 werden.
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: Eine Grösse, die relativ zum Parent-Element ist. Zum Beispiel die Spalte, in der das Elementor-Widget liegt.
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: Steht für Viewport-Width, bezieht sich also auf die Breite des Browser-Fensters.
VH: Steht für Viewport-Height, bezieht sich also auf die Höhe des Browser-Fensters.
Beispiele
Für Schriftgrössen kannst du in Elementor in der Regel Pixel, EM und REM wählen. Wir haben folgende Situation: In den Site Settings ist die Schriftgrösse für p auf 10px definiert. In einer Spalte haben wir definiert, dass die Schriftgrösse 15px ist. (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.
