• Thema

  • Technologie

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

Beitrag speichern

Noch kein Konto? Registrieren

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.

Über mich

  • Simea Merki

    Jeden Tag Menschen helfen, das zu sagen, was sie zu sagen haben. Mit Wirkung und Vision, trotzdem ressourcensparend. Ob es dabei um Websites, Webshops, Content Systeme, Texte oder auch Design geht, ist zweitrangig. Im Vordergrund stehst du und deine Vision. Mit massgeschneiderten und innovativen Ideen geben wir beim Familienunternehmen morntag unser Allerbestes, deine Message zu unterstützen.

Was denkst du dazu?
yeah!
10
wooow
5
what?
8
meh.
6
hahaha
6
Das könnte dich auch interessieren:
Ad - SiteGround Webhosting - Einfache Site-Verwaltung. Mehr erfahren.
Beitrag teilen
Was denkst du dazu?
Was denkst du dazu?
yeah!
10
wooow
5
what?
8
meh.
6
hahaha
6
Diskussion

Schreibe einen Kommentar

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

 

Hinweis: Es kann bis zu zwei Stunden gehen, bis dein Kommentar auf der Website erscheint. Bitte poste deinen Kommentar nur einmal 😉

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

  • Neue Beiträge als E-Mail
    jeden Dienstag die neusten Blogposts in deiner Inbox
    Unsere Partner:

    Dein Gerät ist aktuell offline.