Zusammenhang zwischen @media -Angabe und viewportgröße

[Rolf B]

Hallo Gunnar,

ich frag mich gerade: ist bei @media-Queries, die sich ja auf den Viewport beziehen und deshalb im Kontext des Root-Elements ausgewertet werden dürften, überhaupt ein Unterschied zwischen em und rem möglich?

Im übrigen, Jenny, würde ich nicht versuchen, 640px in em oder rem umzurechnen. 640px ist eine Device-Größe, deren Existenzberechtigung aus EGA und VGA Zeiten stammt und heute eigentlich bei keinem Gerät mehr zu finden ist.

Man hat eine Website. Die hat ein bestimmtes Layout, so, dass sie auf einem schmalen Viewport ordentlich aussieht. Und ab einer bestimmten Viewportbreite erlauben es die Seiteninhalte, dass man Dinge nebeneinander darstellt. Welche Breite das ist, hängt vom Seitenlayout ab. Genau diese Breite fragt man per @media (min-width: ...) oder modernerweise auch @media (width > ...) ab, und baut das Layout mit CSS so um, dass die zusätzliche Breite gut genutzt wird. Das ist der Mobile First Ansatz. Ob es nun 40em sind oder 55rem, entscheidest Du an Hand deiner Inhalte. Vergiss klassische, an Uraltmonitore angelehnte Umschaltpunkte.

Bei ältere Seiten, deren Layout mit dem Desktop begonnen hat, tut man sich damit ggf. schwer und es kann einfacher sein, vom Layout für breitere Viewports auszugehen und mit @media (max-width: ...) bzw. @media (width < ...) Modifikationem für schmale Viewports einzufügen. Wobei man sich bei einer richtig alten Seite mit beiden Richtungen schwer tun dürfte, wenn man das HTML nicht saniert.

Es gab auch mal die 960px-Empfehlung. Die ging so: heutige Bildschirme sind 1024px oder mehr breit. D.h. 960px hat man immer zur Verfügung. Und weil 960 ein Vielfaches von 60 ist, hat diese Zahl herrlich viele Teiler, d.h. man kann ziemlich viele Breitenverhältnisse zwischen Layoutspalten erreichen, ohne runden zu müssen. Deshalb solle man sein Seitenlayout auf einer Breite von 960px aufbauen. In dieser Argumentation steckt der Fehlschluss, dass man alles in ganzen Pixeln ausdrücken muss (weil nämlich sonst die pixelgenauen Layouts nicht funktionieren). Heutigen Browsern ist das ziemlich egal, und pixelgenaue Layouts sind ohnehin ein Irrweg. Vor allem ist das nicht responsiv. Die 960 versteckt sich aber immer noch in den heutigen Browsern. Wenn man die meta viewport Angabe weglässt, simuliert das Handy eine Viewportbreite von 960px, um diese Layout-Doktrin für Webseiten, die nichts von Handys wissen, zu retten.

Rolf