Responsive Webdesign, Media Queries - Anfängerfrage

  • Hallo Community,


    ich habe 4 Style Sheets - Mobil, Tablet und Desktop. Im vierten sind nur die globalen Angaben, welche sich unabhängig von Gerät nicht ändern (z.B. Schriftarten, Hintergründe...) und eben auch die "Weiche", also diese Media Queries die angeben wann welches CSS geladen werden soll. Das ganze sieht so aus (innerhalb des 4ten CSS):


    @import url("desktop.css") screen and (min-width: 950px);


    @import url("tablet.css") screen and (max-width: 950px);


    @import url("mobile.css") screen and (max-width: 480px);


    Sind die Pixelangaben für die jeweiligen Geräte "richtig" (also im Allgemeinen so genutzt)? Am Desktop das Browserfenster hin- und herschrieben klappt wunderbar - es lädt desktop.css, tablet.css und mobil.css. Aber wie sieht es auf "echten" Smartphones und Tablets aus - ist da meine Einstellung richtig?


    Ich besitze leider nur iPad und iPhone und damit zum 2ten Problem.
    iPad und iPhone machen da totale Zicken. Man sagte mir ich soll das hier ausprobieren:


    @import url("mobile.css") (-webkit-min-device-pixel-ratio : 1.5);


    Jedoch lädt jetzt auch das iPad das mobile Style Sheet. Ich bekomme es einfach nicht hin, dass das iPad und iPhone verschiedene Style Sheets laden. Sie laden - egal was ich probiere - immer das selbe.


    Das iPad Mini macht da wieder ne ganz andere Sache(?). Liegt es am Retina Display?


    Bitte bitte kann mir das jemand erklären oder mir ein Beispiel posten, wie es richtig gemacht wird. Ich bin auf dem Gebiet absolutes Frischfleisch.


    Mein Ziel ist einfach: Alle Smartphones sollen "mobile.css" laden, alle Tablets "tablet.css" und alle Notebooks, Desktops "desktop.css". Die Rotation der Geräte ist in dem Fall gleichgültig


    Bin jetzt schon sehr dankbar für jeden Tipp. :-)

  • Hallo,


    Zitat

    Sind die Pixelangaben für die jeweiligen Geräte "richtig" (also im Allgemeinen so genutzt)?


    Ich finde es eher unsinnig beim Responsive Design die Grenzen auf unterschiedliche Geräte abzustimmen. Wenn neue oder Nachfolgemodelle erscheinen passt das plötzlich nicht mehr.


    Von daher mache ich die Änderungen durch das Responsive Design immer nur vom Inhalt und vom Layout abhängig. Damit bin ich auch langfristig auf der sichereren Seite und muss nicht in ein oder zwei Jahren, wenn ein neues Must-Have-Gerät mit bislang ungenutzten Pixelmaßen den Markt erobert, alle Seiten auf das anpassen.


    Gruss


    MrMurphy


  • Das ist Quatsch mit Sauce! Der Sinn von responsive Webdesign ist: verschiedene Display-Auflösungen anzusprechen und damit in der Gestaltung dynamisch sein (reaktionsfähig).


    Die Auflösungen sind standardmäßig 280px, 320px, 480px, 768px und 1024px... alles drüber ist für Desktop-PC und TV Geräte.


    Cheers
    Steffen