zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Media Queries - Wie Ausnahmen behandeln?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.08.2016, 09:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.06.2015
Beiträge: 7
Toxuas befindet sich auf einem aufstrebenden Ast
Frage 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.08.2016, 10:36
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.218
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.08.2016, 12:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.06.2015
Beiträge: 7
Toxuas befindet sich auf einem aufstrebenden Ast
Standard

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.

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 02.08.2016, 13:12
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.218
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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!)
Mit Zitat antworten
Antwort

Stichwörter
handy, media query, mobil, tablet

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Media Queries wollen einfach nicht auf dem Smartphone funktionieren! Der.Andi CSS 4 15.11.2015 11:31
2-column problem in media queries qim CSS 3 05.05.2015 13:19
Probleme mit Media Queries Jannik CSS 3 19.08.2013 21:57
media queries "Anfängerprobleme" supreme CSS 2 22.06.2012 22:03
Media Queries vs. Extraseite Mr.T CSS 5 07.11.2011 22:58


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:48 Uhr.