Dlaczego kolejność zapytań o media ma znaczenie w CSS?

Późno projektowałem witryny, które są bardziej responsywne i często używam zapytań o media CSS. Zauważyłem, że kolejność, w jakiej definiowane są zapytania o media, ma znaczenie. Nie testowałem go w każdej przeglądarce, ale tylko w Chrome. Czy istnieje wytłumaczenie tego zachowania? Czasami robi się frustrujące, gdy witryna nie działa tak, jak powinna i nie masz pewności, czy jest to zapytanie, czy kolejność, w jakiej jest napisane zapytanie.Dlaczego kolejność zapytań o media ma znaczenie w CSS?

Oto przykład:

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;} 
}

Jednak Gdybym napisał zapytanie do 1024x600 w ostatnim, przeglądarka będzie ignorować it i zastosuj wartość marginesu określoną podczas uruchamiania CSS (margin-top: 2em).

/* 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;} 
}

Jeśli moje rozumienie zapytań o media jest poprawne, kolejność nie powinna mieć znaczenia, ale wygląda na to, że tak. Jaki mógł być powód?

Źródło

2012-01-09 dsignr

Jest to zgodne z projektem CSS - Arkusz stylów kaskadowych.

Oznacza to, że jeśli stosuje się dwie zasady, które zderzają się z tych samych elementów, to wybrać ostatnią, która została zadeklarowana, chyba że pierwszy z nich ma znacznik !important lub jest bardziej szczegółowy (np html > body vs tylko body The drugi jest mniej konkretny).

więc, biorąc pod uwagę to CSS

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

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

jeśli okno przeglądarki jest 350 pikseli szerokości, tło będzie niebieski, a przy tym CSS

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

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

i tej samej szerokości okna, tło będzie czerwony. Obie reguły są rzeczywiście dopasowane, ale druga to ta, która jest stosowana, ponieważ jest ostatnią regułą.

Wreszcie,

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

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

lub

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

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

tle będzie niebieski (z 350 pikselami szerokimi).

Źródło

2012-01-09 16:58:46

Dziękuję. Nigdy nie wyobrażałam sobie, że taka prosta logika zrujnuje mi sen na noce razem. Dzięki. – dsignr

W arkuszu stylów, jeśli te same reguły są stosowane bez zapytania o media, a następnie w zapytaniu o media dla urządzeń mobilnych na małym ekranie i istnieje kilka obrazów do załadowania. Co się stanie, czy przeglądarka zignoruje reguły bez zapytania o media i zastosuje tylko określone reguły zapytań o media? –

Lub możesz po prostu dodać min-szerokość do większych zapytań/zapytań i nie mieć żadnych problemów, niezależnie od kolejności.

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

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

Używając tego kodu, w dowolnej kolejności, tło, kolor czerwony będzie zawsze do uchwał o szerokości 400.1px-600px, i zawsze będzie niebieski uchwał o szerokości o wartości 400 pikseli lub mniejszej.

Źródło

2014-11-06 15:58:26

Nice! Dziękuję Ci. – dsignr

I cringe na widok wartości jak 400.1px w CSS. Lub 1023px, 1025px itd. – Monstieur

Dlaczego kolejność zapytań o media ma znaczenie w CSS?

Odpowiedz

Powiązane problemy