Einzelnen Beitrag anzeigen
  #2 (permalink)  
Alt 30.06.2016, 12:48
cloned cloned ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
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

So da ist das Problem doch besser geschildert.
Was möchtest du mit deinen super-spezifischen Mediaqueries erreichen? Du fragst da x verschiedene Dinge ab, gibt es einen bestimmten Grund dafür?
Zum Vergleich, so schauen meine mediaqueries aus und ich wüsste nicht, wieso ich mehr brauchen würde (außer für einen speziellen Fall, dazu komm ich noch)
@media only screen and (max-width:50em) { ... }
@media only screen and (max-width:30em) { .... }

Achte darauf, dass ich keinerlei Pixelwerte verwende, einfach weils funktioniert und ich nie Probleme damit hatte. Auch zu beachten: Das ist 4 Jahre alt, wenn man in pixel arbeiten will, soll man ruhig, das nur zur Erklärung.

Beachte auch, dass ich kein min- und max- vermische. Warum? Weil mediaqueries nun mal auch nur CSS sind und vorangegangene Regeln überschrieben werden. Hab ich das so wie von mir gepostet, dann greift die "kleinste" Bildschirmgröße und übernimmt erst mal alles von allen vorher größeren. Das führt dazu, dass ich bei immer kleineren Bildschirmen auch meist immer weniger CSS habe, da ich nur Änderungen vornehmen muss. Ja, ich gehe von groß zu klein (Kein mobile first), ist aber so angefordert.

Nun zum Zusatz: Da wo ich eventuell mehr als nur max-width brauche, ist, wenn ich retina-displays unterstützen müsste. Das muss ich nicht, aber dann könnte ich das so erweitern:
@media only screen and (max-width:50em) { ... }
@media only screen and (max-width:50em) and ( -webkit-min-device-pixel-ratio: 2){ ... }
@media only screen and (max-width:30em) { .... }
@media only screen and (max-width:30em) and ( -webkit-min-device-pixel-ratio: 2) { .... }

Das Selbe erneut, nur halt für 2x-Auflösung. Auch wüsste ich nicht, wieso es wichtig ist, ob portrait oder landscape eine Rolle spielt, da kommt dann die für die Auflösung spezifizierte CSS-Regel zum Einsatz.
Mit Zitat antworten
Sponsored Links