XHTMLforum - Media Queries - Wie Ausnahmen behandeln?

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Media Queries - Wie Ausnahmen behandeln? (http://xhtmlforum.de/showthread.php?t=72946)

Media Queries - Wie Ausnahmen behandeln?

Moin, habe ein paar Fragen bezüglich von Media Queries.
Folgende benutze ich :

Code:

/*Handys Querformat*/

@media screen and (max-device-with:767px) and (orientation:landscape)



/*Handys Hochformat*/

@media screen and (max-device-width: 480px) and (orientation: portrait)



/*Tablets Querformat */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) 



/*Tablets Hochformat */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)

Diese Queries funktionieren auch soweit ganz gut. Auf den meisten Handys greifen die Queries und auch mit dem Google Mobile Test Tool sieht es größtenteils ganz gut aus.

Allerdings habe ich bemerkt das es manche Geräte gibt , die nicht den "Standardgrößen" folgen beispielsweise das Asus Nexus 7 welches durch die device-width von nur 600 px im Hochformat in keinen Query springt. :(

Um die Queries zu erstellen habe ich mydevice.io common smartphones and tablets devices values benutzt um die gängigsten Größen herauszubekommen.

Habt ihr Tipps um die Queries zu verbessern bzw. wie geht ihr mit solchen "Ausreißern" um ? Oder habe ich etwas grundlegend falsch verstanden ?

Falls ihr die Seite selber mit eurem Gerät überprüfen wollt : Hydraulik-Shop - Hydraulikschlauch | Hydraulikzylinder | Hochdruckreiniger

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.

Okay, soweit klar. Vielen Dank für deine ausführliche Antwort.
Hatte mich vorher noch nicht mit dem Thema beschäftigt und anscheinend war mein Gedanke von Media Queries noch vor 3-4 Jahren angesiedelt. :D

Nur verstehe ich nicht wieso man mit em arbeitet statt mit Pixel ?
Kannst du mir das vielleicht nochmal erklären, inwiefern das einen Vorteil bringt ?
Denn ob ich nun beispielsweise nach 61.875em oder 990 px abfrage ist doch egal.

Auch vor 3-4 Jahren waren Mediaqueries nie so gedacht wie du es dir wünscht, was aber viele nicht daran gehindert hat es so aufzufassen. Vor allem Marketing braucht hier immer wieder eine Erinnerung was MQ ist und was nicht ;)

https://cloudfour.com/thinks/the-ems...a-queries-ftw/

PX, EM or REM Media Queries? | Zell's blog

css - Switching to Em-Based Media Queries - Stack Overflow (Bei der Antwort bis zum "Update" runterscrollen!)