media-Angaben aus Viewportgröße ermitteln

[Auge]

Hallo

Gefühlsmäßig würde ich die Angabe in px machen. Allerdings habe ich auch des öfteren die Angabe in em gefunden.

Was ist nun richtig bzw. besser?

Beides funktioniert, besser ist allerdings die Angabe mit em. EM bezieht sich auf die konkret eingestellte Schriftgröße in dem Browser, den der Seitenbesucher gerade benutzt.

Wie rechnet sich ggf. px um in em?

Üblicherweise und wenn der Benutzer des Browsers die Einstellungen nicht verändert hat, ist die Schriftgröße auf Desktopbetriebssystemen mit 16px angesetzt. In diesem Fall entspricht 1em also 16px. Diese Voreinstellung kann gerade auf Mobilbetriebssystemen/-browsern abweichen. Diese Voreinstellung kann aber auch vom Benutzer geändert worden sein. Ich zum Beispiel habe als Standardschriftgröße 18px festgelegt, man wird schließlich nicht jünger (ich auch nicht).

Mit der Angabe zum Beispiel von Padding in px verändert sich der optische Abstand eines Textes zum Rahmen seines Blocks bei jeweils anderen Schriftgrößen. 10px sind bei einer realen Schriftgröße von 16px mehr als ein halber großer Buchstabe, bei 20px aber um einiges weniger. Sowas kann unangenehm eng wirken.

Mit der Angabe von Größen in em (oder rem) bleiben die Größenverhältnisse der Elemente im Dokument (bis auf Rundungsfehler) immer gleich, auch wenn sich die Schriftgröße von Besucher zu Besucher oder von Browser zu Browser auf Gerät zu Gerät eines einzelnen Benutzers unterscheiden sollte.

Die Anordnung von Seitenelementen mag sich vom Smartphone zu Desktop unterscheiden, die Inhalte einer Seite mögen sich unterschiedlich verhalten (Zeilenumbrüche etc.) aber die Verhältnisse und Abstände innerhalb der Elemente bleiben dennoch erhalten und sind einem einheitlichen und wiedererkennbaren Auftritt förderlich.

Tschö, Auge