Media queries Reihenfolge: DRINGEND bitte helft mir!

[Infidel]

Liebe Community,

seit Stunden versuche ich, Queries in einer CSS in die richtige Reihenfolge zu bringen. Ich schaffe es einfach nicht.

Ich habe 2 css, eine für landscape und eine für portrait. Wie bringe ich die Browser dazu, die richtig zu interpretieren - wie muss also die Reihenfolge sein?

Danke - ich such mich tot und nichts funktionierte bisher.

LG Fidel

[BugBuster]

Die Reihenfolge ist doch egal, du gibts doch an,welche für landscape ist und welche für portrait, oder nicht?

<style type="text/css">
   @media screen and (orientation: portrait) {
     body { background-color: white; }
   }
   @media screen and (orientation: landscape) {
     body { background-color: black; }
   }
 </style>

[Infidel]

Hey Buster,

toll dass du da bist. Ich meine die richtige Reihenfolge der Queries IN den Style Sheets.

also für unter 320, ab 320, ab 480 usw. Ich kriegs nicht gebacken und genau genommen versuche ich es seit Tagen.

Wenn ich es mit deiner Hilfe schaffe, erfülle ich dir mit Freude einen kleinen Amazon Wunsch.

DANKE! Fidel

[Infidel]

Also im Klartext: Wenn mir das jemand korrekt aufbaut - auch pern noch Support per Telefon - zahle ich 50 Euro.

Ich dreh sonst am Rad....

[Infidel]

Ich stehe sehr unter Zeitdruck... die Queries haben mich zu viel Zeit gekostet und morgen an meinem Geburtstag muss ich durcharbeiten. Falls jemand fit in HTML CSS ist und noch auf die Schnelle Geld verdienen will bis morgen Mittag.... meldet euch per PN.

[BugBuster]

auch das ist doch eigentlich eindeutig. Die größte zu erst mit min-width , alle kleineren darunter mit min-width und max-width, die kleinste nur mit max-width, so in der Art:

@media (min-width: 950px) {
   /* breite Browserfenster */
 }
@media (min-width: 450px) and (max-width: 949px) {
   /* Darstellung auf Netbooks */ 
} 
@media (max-width: 449px) {
     /* mobile Geräte */ 
}

Zahlen sind hier willkürlich gewählt als Beispiel.
Wobei die Reihenfolge hier sogar egal wäre, es greift ja hier immer nur eine Regel.

[Infidel]

Du hast eine PN...

[Spooky]

Infidel, Media Queries haben keine Auswirkung auf die Specifity. Das heißt, wenn du innerhalb eines Media Queries einen Selektor hast, der die selbe Specifity hat wie ein anderer Selektor irgendwo darüber - und der Media Query greift - dann überschreibt der Selektor im Media Query die Anweisungen des anderen Selektors davor, außerhalb des Media Queries (falls er überhaupt CSS Eigenschaften überschreibt).

[Infidel]

Ich hatte es schon halbwegs stehen, bis ich Auflösungen gleicher Höhe mit unterschiedlicher Breite erfassen musste. Daran scheitere ich einfach. 80 Stunden gearbeitet in den letzten 5 Tagen... meine Logik streikt langsam. Ich brauche wirklich Hilfe und bezahle auch dafür.

LG Fidel

[Infidel]

Derzeit bin ich hier gelandet - was überhaupt nicht klappt.

@charset "utf-8";
/* CSS Document V1 */ 


/* Display block: smartphone not suited */
@media only screen and (min-width:100px)  {
}

/* 320 screens */
@media only screen and (min-width:320px){
}

/* 480 screens */
@media only screen and (min-width:480px){
}

/* 640 screens */
@media only screen and (min-width:640px) {
}

/* 1023 screens */
@media only screen and (min-width:1023px)  {
}

/* 1024 screens */
@media only screen and (max-width:1024px) and  and  (min-height:601px)  {
}

/* 1024 / 600 screens */
@media only screen and (min-width:1024px) and  (min-height:599px)  {
}

/* big screens */
@media only screen and (min-width:1025;) {
}


 Ab hier auskommentiert
/* @media only screen and (min-height:570px) and (max-height:604px){
} */


/*
@media only screen and (min-height:605px) and (max-height:800px)  and (-webkit-min-device-pixel-ratio: 1) {
*/


/*
@media only screen and (min-height:601px) and (max-height:800px)  and (-webkit-min-device-pixel-ratio: 1.325) {
}*/

/*@media only screen and (min-height:601px) and (max-height:800px)  and (-webkit-min-device-pixel-ratio: 2) {
}*/

/*
@media only screen and (min-height:481px) and (max-height:600px)  and (-webkit-min-device-pixel-ratio: 1) {
}

@media only screen and (min-height:320px) and (max-height:480px) {
}

@media only screen and (width:854px) and (height:480px) and (-webkit-min-device-pixel-ratio: 1) {
}	 

@media only screen and (min-height:320px) and (max-height:480px)  and (-webkit-min-device-pixel-ratio: 1.5) {			 
}

@media only screen and (min-height:320px) and (max-height:480px)  and (-webkit-min-device-pixel-ratio: 1.7) {
}

@media only screen and (min-height:320px) and (max-height:480px)  and (-webkit-min-device-pixel-ratio: 2) {
}

@media only screen and (width:568px) and (height:320px)  and (-webkit-min-device-pixel-ratio: 2) { 
}

@media only screen and (width:480px) and (height:320px)  and (-webkit-min-device-pixel-ratio: 2) { 
}

@media only screen and (min-height:320px) and (max-height:480px)  and (-webkit-min-device-pixel-ratio: 3) {

@media only screen and (width:640px) and (height:360px) and (-webkit-min-device-pixel-ratio: 1) {
}

@media only screen and (width:640px) and (height:360px) and (-webkit-min-device-pixel-ratio: 3) {
}
*/

[Spooky]

Wozu überhaupt so viel? Und deine Media Queries alleine sagen ja nichts aus.

[Infidel]

Spooky,

ich muss eine grafische Oberfläche für ein Spiel zum laufen kriegen und versuche das für alle Auflösungen zu optimieren.

Ich muss wissen, wie die richtige Reihenfolge der Queries lautet.

Danke!!!

[Infidel]

@media only screen and (min-width:1026;) { 

my styles here

}

Das spricht einen 1920er Screen nicht an, auch nicht wenn es an erster Stelle steht. Ich kapier´s echt nicht.

[BugBuster]

wegen px die da fehlen?

@media only screen and (min-width:1026px) { 

my styles here

}

[Infidel]

Ok das letzte war ein Syntaxfehler...

[Infidel]

Ah, hattest du auch schon. Danke...

[Spooky]

Ich muss wissen, wie die richtige Reihenfolge der Queries lautet.

Es gibt keine "richtige" Reihenfolge. Alles hängt davon ab wie das Ergebnis aussehen soll und wie deine sonstigen styles aussehen.

[tab]

Oder um es mal anders zu formulieren: Wenn du die Queries so formulierst, dass bei jeder Breite und Höhe und was-auch-sonst-noch-immer immer nur ein media query greift, dann ist die Reihenfolge völlig egal. Das heißt dann, dass du z.B. mit Angabe von min-width und max-width, min-height und max-height die in Frage kommenden Bereiche von Breite und Höhe genau eingrenzt und für jede denkbare Breite und Höhe und sonstige Eigenschaft immer nur eine der Bedingungen erfüllt ist. Auf diese Weise kannst du jeder Höhe und Breite ganz exakt das entsprechende CSS zuweisen. Das geht immer und man muss nicht viel dabei denken . Erzeugt je nachdem, wieviele Bereiche zu unterscheiden sind, eine größere Menge an CSS, da ja immer alles ausgeliefert wird.

[BugBuster]

Da sind einige Überschneidungen drin die für mich irgendwie kein Sinn ergeben.

/* 1023 screens */
@media only screen and (min-width:1023px)  {
}

/* 1024 screens */
@media only screen and (max-width:1024px) and  and  (min-height:601px)  {
}

/* 1024 / 600 screens */
@media only screen and (min-width:1024px) and  (min-height:599px)  {
}

Wenn hier ein Browser mit 1024x700 (BxH, 768er Auflösung minus die Symbolleisten, Adresszeile etc.) ankommt, dann sind diese 3 Regeln ein Treffer.

Frage an die CSS Experten: Was passiert in dem Fall? Werden hier dann alle 3 "gemerged" von oben nach unten oder ersetzen die sich so daß dann nur die dritte gilt?
Habe damit so im Detail noch nicht gespielt, mein Grid wo ich auch Media Querys einsetze hat keine Überschneidung und bezieht sich generell nur auf die Breite.

[tab]

Meines Wissens bewirkt ein media query nur, dass der Browser eben die entsprechende Bedingung prüft und dementsprechend die styles dann anwendet oder nicht. Gemerged wird da also nichts. Der Browser sollte das genauso behandeln, als ob da keine media queries wären und die styles innerhalb der nicht greifenden media queries einfach nicht existieren. Also Kaskade usw alles wie "normal".

[mlweb]

Da sind einige Überschneidungen drin die für mich irgendwie kein Sinn ergeben.

Frage an die CSS Experten: Was passiert in dem Fall? Werden hier dann alle 3 "gemerged" von oben nach unten oder ersetzen die sich so daß dann nur die dritte gilt?
Habe damit so im Detail noch nicht gespielt, mein Grid wo ich auch Media Querys einsetze hat keine Überschneidung und bezieht sich generell nur auf die Breite.

Wenn die media queries Überschneidungen haben, werden die Anweisungen so wie in css üblich von oben nach unten abgearbeitet. Werden gleiche Selektoren und Eigenschaften angesprochen, kommt es zum Überschreiben.

@Infidel

/* 1024 screens */
@media only screen and (max-width:1024px) and  and  (min-height:601px)  {
}

/* 1024 / 600 screens */
@media only screen and (min-width:1024px) and  (min-height:599px)  {
}
/* big screens */
@media only screen and (min-width:1025;) {
}

Im Code oben ist

• ein "and" zuviel und einmal fehlen die Pixel
• mit der ersten Zeile sprichst Du alle kleinen Bildschirme (bis einschließlich 1024px) und einer Mindesthöhe von 601px
• mit der zweiten Zeile alle großen Bildschirme (ab einschließlich 1024px) mit einer Mindesthöhe von 599px
• mit der dritten Zeile überschreibst Du ggf. die Anweisungen aus zweiten Zeile

Wenn die zwei Pixel Unterschied in der Höhe nicht kriegsentscheidend sind, könntest Du auch alle Bildschirme mit einer Mindesthöhe von 600px (bzw. 601px oder 599px) ansprechen und zwar als letzten Punkt
Also nur

...
/* 640 screens */
@media only screen and (min-width:640px) {
}

/* 1023 screens */
@media only screen and (min-width:1023px)  {
}
/* big screens */
@media only screen and (min-width:1024px;) {

/* hohe screens */
@media only screen and (min-height:600px) {
}

Fall es doch wichtig ist

...
/* 640 screens */
@media only screen and (min-width:640px) {
}

/* 1023 screens */
@media only screen and (min-width:1023px)  {
}
/* big screens */
@media only screen and (min-width:1024px;) {

/* kleine  hohe screens */
@media only screen and (max-width:1024px) and (min-height:601px)  {
}

/* große hohe screens */
@media only screen and (min-width:1024px) and  (min-height:599px)  {
}

In jedem Fall machst Du also zuerst alle Angaben die ausschließlich von der Breite abhängen, danach kommen die Angaben die ab einer bestimmten Höhe des Bildschirms anders sein sollen also überschrieben werden oder zusätzlich dazu kommen.

Ich hoffe ich habe mich halbwegs verständlich ausgedrückt.

Nachtrag: Wobei Du dann sicher den Unterschied zwischen 1023px und 1024px (nur Breite) gar nicht brauchst.

[folkfreund]

Erstmal alles Gute zum Geburtstag!

Ich hoffe du bist noch nicht verzweifelt!

Aus den bisherigen Vorschlägen geht nicht wirklich hervor, ob du auch CSS außerhalb der Queries hast.

Weiterhin noch eine Frage an die Profis:
Kann man Mediaqueries verschachteln? Ich meine:

@media screen and (max-width: 680px) {
/* alles für ziemlich schmale screens beliebiger Höhe
  ...
*/
  @media screen and (max-height: 400px) {
  /* hier die Anpassungen bei geringer Höhe
    ...
  */
  }
}

Gruß, folkfreund

[mlweb]

Aus den bisherigen Vorschlägen geht nicht wirklich hervor, ob du auch CSS außerhalb der Queries hast.

Bei mobile first kommt alles, was unabhängig von der Breite ist zu erst und wird für größere Breiten ggf. ergänzt bzw. überschrieben

Weiterhin noch eine Frage an die Profis:
Kann man Mediaqueries verschachteln? Ich meine:

@media screen and (max-width: 680px) {
/* alles für ziemlich schmale screens beliebiger Höhe
  ...
*/
  @media screen and (max-height: 400px) {
  /* hier die Anpassungen bei geringer Höhe
    ...
  */
  }
}

Die Spezifikation läßt das zu. Die Realität macht wohl Probleme http://stackoverflow.com/questions/1...47166#11747166.
Ich habe es bisher noch nie benötigt.

[mlweb]

Die größte zu erst mit min-width , alle kleineren darunter mit min-width und max-width, die kleinste nur mit max-width, so in der Art:

@media (min-width: 950px) {
   /* breite Browserfenster */
 }
@media (min-width: 450px) and (max-width: 949px) {
   /* Darstellung auf Netbooks */ 
} 
@media (max-width: 449px) {
     /* mobile Geräte */ 
}

Zahlen sind hier willkürlich gewählt als Beispiel.
Wobei die Reihenfolge hier sogar egal wäre, es greift ja hier immer nur eine Regel.

Das bringt Dir aber den Nachteil, dass Du ggf. Regeln doppelt schreiben mußt.

[BugBuster]

Da sollen eigentlich nur die Regeln rein die vom normalem Abweichen, es gibt also nicht nur diese Regeln. (bei mir)
Das da auch mal in einigen dasselbe steht, z.B. ein "float:none !important;", bei kleineren Auflösungen, ja gut. Und? Sehe ich klein Problem.
Wenn das alles in einer css steht ist die ja eh komplett erst mal geladen bevor die interpretiert wird.

[mlweb]

Ist schon klar. Bei mir gibt es auch nicht nur Regeln innerhalb der media queries.
Vielleicht ist es auch eine Gewöhnungsfrage. Ich habe es anfänglich auch mal so eingegrenzt wie Du. Mich hat es dann aber genervt, wenn ich aus welchem Grund auch immer nachträglich in zwei oder mehr media queries die gleichen Änderungen durchführen musste. Als alter Schussel hab ich es dann irgendwo vergessen und mich gewundert.

[Infidel]

Hallo

und danke für das allgemeine Interesse. Letztlich habe ich um 3 Uhr Nachts die richtige Reihenfolge, die auch einzelne Geräte erfasst, heraus gefunden. Unten für alle Suchenden die in allen größeren Browsern funktionierende Reihenfolge. Eine Frage steht allerdings noch im Raum. Offenbar greift sich diese Logik bei einigen Geräten die Screengröße ab und NICHT die Browsergröße. Das Führt dazu, dass zB. im Safari die Höhe nicht richtig angezeigt wird, oben fehlt ein Stück, das genau der Höhe der Taskbar entspricht.

Gibt´s dafür irgendeine Lösung?


HIER DIE RICHTIGE MEDIA QUERIES REIHENFOLGE (für Portrait, Landscape verhält sich analog... also auch im Landscape die Breite abfragen... )

/* big screens */
/* 800+ screens */
@media only screen and (min-width: 801px) and (max-width: 3000px){
}

/* 720+ screens */
@media only screen and (min-width: 720px) and (max-width: 800px){
}

@media only screen and (min-width: 799px) and (max-width: 800px) and (-webkit-min-device-pixel-ratio: 2){ 	
	}

/* 480 screens */
@media only screen and (min-width: 481px) and (max-width: 719px){
}

@media only screen and (device-aspect-ratio: 540/960)  {
	}

/* 480 screens */
@media only screen and (min-width: 322px) and (max-width: 480px){
}

@media only screen and (min-width: 322px) and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5){ 
	}

@media only screen and (min-width: 322px) and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2){ 
	}


/* 480 screens */
@media only screen and (min-width: 320px) and (max-width: 321px){
}


	/* Display block: smartphone not suited for this game */
@media only screen and (min-width: 100px) and (max-width:319px)  {
	.blocker { display:block; width:100%; height:100%; background-color:#ddd; vertical-align:middle; text-align:center; position:absolute; z-index:20; color:#555; padding:1em; top:0px; left:0px;}
}
@media only screen and (min-height: 1px) and (max-height:240px)  {
	.blocker { display:block; width:100%; height:100%; background-color:#ddd; vertical-align:middle; text-align:center; position:absolute; z-index:20; color:#555; padding:1em; top:0px; left:0px;}
}

[BugBuster]

Offenbar greift sich diese Logik bei einigen Geräten die Screengröße ab und NICHT die Browsergröße.

Für diesen Fall, ich denke mal das waren bestimmt Mobile Geräte, gibt es die Anweisung (ich glaub im meta tag), das die device Größe gleich der Browsergröße gesetzt wird. (bzw. umgekehrt)