• Thema

  • Technologie

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

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.

Noch mehr finden:

  • Thema

  • Technologie

Beitrag teilen
Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on email
Share on xing
Was denkst du dazu?
yeah!
2
wooow
0
what?
0
meh.
0
hahaha
0
Diskussion

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

 

Aktuelle Jobangebote
  • Grafik / Prepress / Druck / Verpackung / Werbetechnik | Medienjobs und Stellen für Profis

  • Newsletter abonnieren

    Noch mehr finden:

    • Thema

    • Technologie

    Dein Gerät ist aktuell offline.