media queries in respnsive web design

[molily]

Hallo,

Sind dann die Tausende, die im Internet media-queries verwenden der Art
/* Iphone */
@media.....
/* Ipad xy horizontal...*/
....

alle unvernünftig?

Sie vermitteln ein falsches Bild, wie Responsive Design funktioniert.

Ein responsives Layout versucht die Viewportgröße auszunutzen und eine passende Präsentation zu bieten. Das Layout und die Breakpoints für die Media Queries wählt man nach Inhalten. Das kann beispielsweise sein:

< 40em: Einspaltig, volle Breite

= 40em: Zweispaltig, volle Breite
= 60em: Dreispaltig, Container mit max-width: 80em

Im Beispiel wird gar nicht mit Pixeln gearbeitet, sondern mit em-Werten. Das ist ein typographisches Maß, denn entscheidend für die Lesbarkeit des Textes die Spaltenbreite im Verhältnis zur Schriftgröße. In einer Spalte sollten nie zu viele oder zu wenig Zeichen stehen.

Die Viewport-Breite von irgendwelchen Geräten ist erst einmal egal. Es geht darum, die jeweiligen Inhalte gut darzustellen. Interessant ist, was zwischen den Breakpoints passiert. Zum Beispiel durch Prozentbreiten kann sich ein Layout an sämtliche Viewport-Breiten anpassen. Die Media-Queries ändern nur den groben Rahmen.

Wenn du nach Media Queries für irgendwelche Geräte suchst, so zäumst du das Pferd von hinten auf. Media Queries sind nur ein Werkzeug für Responsive Design. Der Idee nach geht es nicht um ein Layout für iPad 1-2 und iPad Mini, ein Layout für iPad 3-4, ein Layout für iPhone vor 4, ein Layout für iPhone 4, ein Layout für iPhone 5… und das ganze für sämtliche Ausrichtungen und tausende andere Geräte. Das wäre Quatsch, da Geräte kommen und gehen. Responsive Design bedeutet, eine anpassungsfähige Seite zu bauen, nicht sie auf einzelne aktuelle Geräte zu »optimieren«.

Mathias