@media zapytania - jedna reguła przesłania drugą?

Question

Mam wiele zapytań @media, wszystkie działają poprawnie, ale gdy tylko ustawię wyższą maksymalną szerokość ekranu niż 1024px, reguły dla wyższej szerokości zostaną zastosowane do wszystkiego.

@media screen and (max-width: 1400px) 
    { 
     #wrap { 
     width: 72%; 
     } 
    } 
@media screen and (max-width: 1024px) 
{ 
    #slider h2 { 
    width: 100%; 
    } 
    #slider img { 
    margin: 60px 0.83333333333333% 0 2.08333333333333%; 
    } 
    .recent { 
    width: 45.82%; 
    margin: 10px 2.08333333333334% 0 1.875%; 
    } 
} 

jak widać 1024px (a także zapytanie 800px szerokości max) nie zmieniają szerokość #wrap i działają bez zarzutu. Jak tylko dodaję 1400px zapytanie o maksymalnej szerokości, zmienia je na 72% dla WSZYSTKICH rozmiarów i robi to samo dla dowolnego elementu - na przykład, jeśli ustawię #slider img na margines 40px, będzie wyświetlane przy WSZYSTKICH rozmiarach, nawet jeśli jest tylko w maksymalnej szerokości 1400px.

Czy brakuje czegoś naprawdę oczywistego? Próbowałem to rozwiązać przez ostatnie 2 dni! Dzięki, John

Answer 1

Nie jestem pewien, czy w pełni podążam, ale zasady @media sugerują, że jest to zachowanie, które chcesz. Jeśli ekran ma 1400 pikseli i mniej, szerokość #wrap wynosi 72%, to obejmuje wszystkie inne rozmiary wymienione w innych zapytaniach o media.

Jeśli chciał ją stosować tylko między 1024px 1400px i trzeba go zmienić ...

@media screen and (max-width: 1400px) and (min-width: 1024px) 
{ 
    #wrap { 
    width: 72%; 
    } 
} 

EDIT Trzeba również pamiętać, że zamawianie spraw w CSS ...

@media screen and (max-width: 1400px) 
{ 
    #wrap { 
    width: 72%; 
    } 
} 
@media screen and (max-width: 1024px) 
{ 
    #wrap { 
    width: 100%; 
    } 
} 

Dla ekranów powyżej 1024 pikseli szerokość #wrap będzie wynosić 72%, ponieważ będą one zgodne tylko z pierwszym zapytaniem o media. Jeśli ekran jest niższy niż 1024px, szerokość #wrap będzie równa 100%, chociaż będzie dopasowana przez oba zapytania o media. CSS, który będzie wyświetlany na ekranie pod 1024px będzie wyglądać ...

#wrap { 
width: 72%; 
} 
#wrap { 
width: 100%; 
} 

zasadach określonych w dalszej części arkusza zastępuje wcześniejsze zasady http://www.w3.org/TR/CSS21/cascade.html#cascading-order 6.4.1 punkt 4. Dlatego też, jeśli zamieniłem kolejność reguł .

@media screen and (max-width: 1024px) 
{ 
    #wrap { 
    width: 100%; 
    } 
} 
@media screen and (max-width: 1400px) 
{ 
    #wrap { 
    width: 72%; 
    } 
} 

Szerokość #wrap będzie 72% dla wszystkich przekątnej ekranu do 1400px, ponieważ ekran pod 1024px będzie zobaczyć zarówno zasady, jak gdyby były ...

#wrap { 
width: 100%; 
} 
#wrap { 
width: 72%; 
} 

ekran będzie ponad 1024px zobacz ...

#wrap { 
width: 72%; 
} 

Oba mają taki sam wynik.