Probleme mit Responsive Design

[mv_alex]

Hallo zusammen,

ich habe mich mal an einem Responsive Design versucht, dass zwar nicht auf einem Grid basiert, aber zumindest unterschiedliche Layouts je nach Bildschirmbreite darstellt.

Dazu habe ich mit Media Queries unterschiedliche Stylesheets eingebunden:

desktop.css: only screen and (min-width: 960px)
tablet.css: only screen and (min-width: 768px) and (max-width: 959px)
smartphone.css: handheld,only screen and (max-width: 767px)

Das klappt auch ganz gut, zumindest unter Firefox (z.B. beim Verkleinern des Fensters) und auf mobilen Geräten. Aber leider, wie so oft, nicht unter dem Internet Explorer. Version 8 scheint die "kleineren" Stylesheets nicht einzubinden, und unter IE7 sieht's noch schlimmer aus, das kann ich mir teilweise gar nicht mehr erklären.

Nun beschleicht mich der Verdacht, dass der IE in den älteren Versionen keine Media Queries kennt. Wie kann ich das elegant lösen - vielleicht ein eigenes Stylesheet für IE? Für alle anderen älteren Browser? Oder habt Ihr 'ne bessere Idee?

Würde mich sehr über Anregungen freuen!
Danke!

Gruß Alex

[BugBuster]

IE8 und kleiner können kein CSS3 wozu @media gehört.
ABER, welches Gerät was solch kleine Auflösung hat benutzt IE? Richtig keins. (OK, die ganz alten Windows Mobile Teile, aber ich trinke auch keine 7 Jahre alte Milch)

Wenn es denn unbedingt sein muss:
http://code.google.com/p/css3-mediaqueries-js/

[planepix]

... aber ich trinke auch keine 7 Jahre alte Milch)

[mv_alex]

ABER, welches Gerät was solch kleine Auflösung hat benutzt IE? Richtig keins.

Das stimmt, das Problem ist aber vielmehr, dass die Desktop-Version auch sch... aussieht, weil ja auch die Angaben für die großen Breiten nicht gezogen werden.

Das Script werde ich mal ausprobieren, der Prozentsatz von Nutzern ohne JS dürfte ja verschwindend gering sein. Ich hoffe, es gibt keine Wechselwirkungen mit anderen Scripts ...

Danke für den Tipp!

Gruß Alex

[BugBuster]

lass doch "desktop.css: only screen and (min-width: 960px)" wech und binde die desktop.css direkt ein. (ohne media query)
natürlich muss dann bei den anderen eventuell werte überschrieben werden, aber das tut man ja eh so. (so kenne ich das und so macht das auch Contao 3)

[andreas.schempp]

Ich hab die desktop.css jeweils nochmals per IE Conditional Comment eingebunden.

[BugBuster]

auch ne witzige Idee.

[mv_alex]

@BugBuster: So hatte ich es ursprünglich, fand es aber irgendwie inkonsequent bzw. unsauber.

@andreas.schempp: Das gleiche Stylesheet? Oder eine identische Kopie? Wäre ja doppelter Pflegeaufwand(?).

Mit der JS-Erweiterung scheint es aber auch ganz gut zu klappen. Alleine im IE < 9 verschwinden beim Browser-Resize die Vorschaubilder aus dem Nachrichtenmodul, bei anderen Browsern nicht. Habt Ihr sowas schon mal beobachtet?

Gruß Alex

[andreas.schempp]

Das selbe Stylesheet, keine Kopie. Es geht ja nur darum, dass der IE die Desktop-Styles liest. Dort muss es ja nicht responsive sein.

[mv_alex]

Schließt der Conditional Comment denn nicht andere Browser vom Desktop-Stylesheet aus?

[BugBuster]

Es geht darum, das IE <9 keine @media versteht (CSS3) und die dann komplett wegläßt. Für diese Oldies muss man dann entsprechend reagieren.

Ich gehe da anders ran. ich habe eine Default CSS die für alle gilt (ohne "media") und zusätzliche mit "media" schränken nur bei Breite <768px ein. Wenn der IE7 das nicht versteht ist mir egal, dazu müsste ja jemand mit IE7 und sehr kleiner Auflösung kommen. Selbst mein Uralt Netbook hat 1024 Pixel.

[mv_alex]

Stimmt natürlich. Ist auch ein guter Ansatz.

[MacPix]

Habe da noch fragen:

Muss man - smartphone.css: handheld,only screen and (max-width: 767px) angeben, wenn mann in contao3 es beim layout angeben kann?

Ich machte die mobile über day layout und die 2 andern mit den querys es bin dann gar nicht mehr.

Oder muss man für alle 3 varianten ein layout machen?

Danke der info

[MacPix]

Hallo

Ich nochmals.
Gestern versuchte ich den ganzen Abend die css per mediaquery zu zuweisen.

Bei mir klapt es einfach nicht.
Es ist nicht responsitiv.
Sobald ich ein min-width eingebe ist das css nicht mehr aktiv. Habe version 3.0.3

Kann man auch bei der zeile mediaquery min-width und max-width eingeben?

Wer kann mir da helfen ?? Was mache ich da nicht richtig ..