web-dev-qa-db-de.com

Warum ist die Reihenfolge der Medienabfragen in CSS wichtig?

In letzter Zeit gestalte ich Websites, die reaktionsschneller sind, und verwende häufig CSS-Medienabfragen. Ein Muster, das mir aufgefallen ist, ist, dass die Reihenfolge, in der die Medienabfragen definiert werden, tatsächlich von Bedeutung ist. Ich habe es nicht in jedem Browser getestet, sondern nur in Chrome. Gibt es eine Erklärung für dieses Verhalten? Manchmal ist es frustrierend, wenn Ihre Website nicht ordnungsgemäß funktioniert und Sie sich nicht sicher sind, ob es sich um die Abfrage oder die Reihenfolge handelt, in der die Abfrage geschrieben wurde.

Hier ist ein Beispiel:

HTML

<body>
    <div class="one"><h1>Welcome to my website</h1></div>
    <div class="two"><a href="#">Contact us</a></div>
</body>

CSS:

body{
font-size:1em; /* 16px */
}

.two{margin-top:2em;}



/* Media Queries */

@media (max-width: 480px) {
    .body{font-size: 0.938em;}

}
/* iphone */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
@media (min-width: 1200px) {
       .two{margin-top:8em;}
            }
/*1024x600*/
@media (max-height: 600px) {
       .two{margin-top:4em;}
}
/*1920x1024*/
@media (min-height: 1020px) {
       .two{margin-top:9em;}
}
/*1366x768*/
@media (min-height: 750px) and (max-height: 770px) {
       .two{margin-top:7em;}
}

Wenn ich jedoch die Abfrage für 1024 x 600 im letzten geschrieben habe, ignoriert der Browser sie und wendet den am Anfang des CSS angegebenen Randwert an (Rand oben: 2 em).

/* Media Queries - Re-arranged version */

@media (max-width: 480px) {
    .body{font-size: 0.938em;}
}
/* iphone */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
@media (min-width: 1200px) {
       .two{margin-top:8em;}
}
/*1920x1024*/
@media (min-height: 1020px) {
       .two{margin-top:9em;}
}
/*1366x768*/
@media (min-height: 750px) and (max-height: 770px) {
       .two{margin-top:7em;}
}
 /*1024x600*/
@media (max-height: 600px) {
       .two{margin-top:4em;}
}

Wenn ich die Medienabfragen richtig verstehe, sollte die Reihenfolge keine Rolle spielen, aber es scheint, als ob dies der Fall ist. Was könnte der Grund sein?

67
dsignr

Das ist eine Absicht von CSS - Cascading Style Sheet.

Wenn Sie zwei Regeln anwenden, die auf dieselben Elemente kollidieren, wird die letzte Regel ausgewählt, die deklariert wurde, es sei denn, die erste hat das !important Marker oder ist spezifischer (z. B. html > body vs nur body, letzteres ist weniger spezifisch).

Also, angesichts dieser CSS

@media (max-width: 600px) {
  body {
    background: red;
  }
}

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

wenn das Browserfenster 350 Pixel breit ist, wird der Hintergrund mit diesem CSS blau

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

bei gleicher Fensterbreite ist der Hintergrund rot. Beide Regeln stimmen zwar überein, aber die zweite ist diejenige, die angewendet wird, weil es sich um die letzte Regel handelt.

Schließlich mit

@media (max-width: 400px) {
  body {
    background: blue !important;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

oder

@media (max-width: 400px) {
  html > body {
    background: blue;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

der Hintergrund ist blau (mit einem 350 Pixel breiten Fenster).

118

Oder Sie fügen der/den größeren Medienabfrage (n) einfach eine minimale Breite hinzu und haben unabhängig von der Reihenfolge keine Probleme.

@media (min-width: 400.1px) and (max-width: 600px) {
  body {
    background: red;
  }
}

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

Wenn Sie diesen Code in beliebiger Reihenfolge verwenden, ist die Hintergrundfarbe für Auflösungen mit einer Breite von 400,1 bis 600 Pixel immer rot und für Auflösungen mit einer Breite von 400 Pixel oder weniger immer blau.

18
Liran H