Formatierung mit media queries

[Rolf B]

Hallo wonk,

bitte erläutere genauer, welche Layoutversion was sein soll und welches Verhalten der Seite du erwartest. Das bekomme ich aus deinen Andeutungen nicht heraus.

Dein Menü ist übrigens nicht bedienbar. Wer keine Maus hat, kann es nicht benutzen. Popup-Menüs nur mit CSS funktionieren schlecht bis gar nicht. Ich habe gerade die Quelle für ein besseres Beispiel nicht zur Hand, aber jemand anderes bestimmt.

Wie auch immer. Guck Dir mal das hier an. Kein Wort JavaScript, alles CSS. Ist das Fenster breit genug, wird es ein Grid, andernfalls stehen die Elemente untereinander. Und es ist nur ein einziger Media-Breakpoint.

Es ist natürlich nicht fertig. Im schmalen Modus muss man das Top-Menü noch ausblenden (eventuell - nicht zwingend) und eine bedienbare Methode anbieten, um es zu nutzen. Im breiten Modus ebenso. Das Fiddle zeigt nur die Umschaltung zwischen schmal und breit.

Kleiner Nachteil: Die 5 Bilder oben werden im HTML immer angesprochen, auch wenn das CSS sie ausblendet. Aber sie sind nicht groß, das kann man verschmerzen, und ein guter Browser sollte die Bilder auch nicht laden wenn sie nicht sichtbar sind. Aber es ist nicht so einfach, auf das Umschalten eines @media Break mit JavaScript zu reagieren, dafür scheint es kein Event zu geben. Ich finde nur diverse Tricks und Hacks dazu, die ich mir selbst erstmal anschauen müsste.

Rolf