Zusammenhang zwischen @media -Angabe und viewportgröße
0 
Gunnar Bittersmann
0 0 Gunnar Bittersmann
0 
Robert B.
0 
Rolf B
Zusammenhang zwischen @media -Angabe und viewportgröße
Moin,
in den Angaben "@media only screen and (max-width: 48rem)" finde ich die rem-Angabe.
Im Test mit verschiedenen Viewgrößen mit Firefox steht dort z.B. 1280x950. Wie rechnet man die Breite 1280 in rem um?
-
@@Jenny
in den Angaben "@media only screen and (max-width: 48rem)" finde ich die rem-Angabe.
Im Test mit verschiedenen Viewgrößen mit Firefox steht dort z.B. 1280x950. Wie rechnet man die Breite 1280 in rem um?
Die übliche Grundeinstellung der meisten Browser ist 1rem ≙ 16px. (Nutzer können in ihren Einstellungen aber eine andere Schriftgröße angeben.)
Aber wozu meinst du, das zu brauchen?
🖖 Live long and prosper
--
“In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”
— Bruce Springsteen, Manchester 2025-05-14-
@@Jenny
Aber wozu meinst du, das zu brauchen?
Ich verkleinere Schritt für Schritt die Breite des Screens (Viewports?) und sehe dann z.B. an der Stelle 640x950 eine Sprung meines Seiteninhalts. Um die geeignete media-Angabe zu machen, müsste ich das ja in rem umwandeln. Oder kann man in der media-Angebe die 640 in irgendeiner Form angeben?
-
@@Jenny
Oder kann man in der media-Angebe die 640 in irgendeiner Form angeben?
Kann man; sollte man aber nicht. ☞ PX, EM or REM Media Queries?
Um die geeignete media-Angabe zu machen, müsste ich das ja in rem umwandeln.
Ja. Und wenn du nichts an den Grundeinstellungen der Schriftgröße in deinem Browser geändert hast, dann teile durch 16.
🖖 Live long and prosper
--
“In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”
— Bruce Springsteen, Manchester 2025-05-14 -
Moin Jenny,
Aber wozu meinst du, das zu brauchen?
Ich verkleinere Schritt für Schritt die Breite des Screens (Viewports?) und sehe dann z.B. an der Stelle 640x950 eine Sprung meines Seiteninhalts.
Du kannst (solltest?) die Seite auch Zoomen für die Media-Queries, gerade weil es ja relative Größen sein sollen.
Um die geeignete media-Angabe zu machen, müsste ich das ja in rem umwandeln. Oder kann man in der media-Angebe die 640 in irgendeiner Form angeben?
Ja, aber besser nicht, wie Gunnar schon beschrieben hat.
Viele Grüße
Robert-
Moin Robert,
Du kannst (solltest?) die Seite auch Zoomen für die Media-Queries, gerade weil es ja relative Größen sein sollen.
Was erfahre ich durch das Zoomen?
Gruß
Jenny
-
Moin Jenny,
Du kannst (solltest?) die Seite auch Zoomen für die Media-Queries, gerade weil es ja relative Größen sein sollen.
Was erfahre ich durch das Zoomen?
wie sich das Layout verhält wenn jemand nicht mit 100% Zoom unterwegs ist. Wenn ich einen Bildschirm mit 150% Zoom habe, muss das Layout mit dem geringeren verfügbaren Platz auch umgehen können. Zumal siehst Du so sehr schnell, wo Pixel mit em oder rem kollidieren, weil die unterschiedlich skalieren.
Viele Grüße
Robert
-
-
-
-
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
--
sumpsi - posui - obstruxi
-