Es gibt keine Standardgrößen und Mediaqueries sind auch nicht dafür da um so verwendet zu werden wie du es dir vorstellst. Löse dich bitte von der Vorstellung für "Handys" ein CSS und für "Tablets" ein anderes CSS und für iPhone vllt noch ein anderes "CSS" zu erstellen. Mediaqueries sind dafür gedacht, um bei verschiedenen Auflösungen Inhalt unterschiedlich anzuzeigen. Da kann es dir, sofern du dich von der anfänglich erwähnten Vorstellung verabschiedet hast, herzlich egal sein, wie "Standardisiert" die Auflösungen sind.
Hier kurz eine Anmerkung: Jede dieser
rosa-kasterl kann ein mobile-device sein.
Genug der Theorie, wie schaut das in der Praxis aus:
Du sortierst deine Mediaqueries von Groß nach Klein (oder umgekehrt, hauptsache sortiert
)
Code:
@media only screen and (max-width:64em) {
}
@media only screen and (max-width: 61.875em){/*990px*/
}
@media only screen and (max-width:60em){/* - 960*/
}
@media only screen and (max-width: 32.500em) {/*bis 520 */
}
So in etwa
kann das aussehen. Die Werte müssen natürlich "an deine Website" angepasst werden. Und
nicht an Geräte! Das ist, was viele bei Mediaqueries/wir sind jetzt responsive falsch verstehen.
Auch ist wichtig, dass du keine fixen Größen verwendest sondern mit max-width, bzw. mit Prozenten etc. arbeitest. Kommt jetzt ein Handy mit 880px max-Breite daher, dann passt die Darstellung weil das CSS von 612.875em greift. Man muss hier uach nur die Änderungen zwischen den einzelnen Auflösungen notieren.
Beachte auch, dass orientation etc. nicht wirklich benötigt werden.