@ truy vấn đa phương tiện - một quy tắc ghi đè một truy vấn khác?

Question

Tôi có nhiều truy vấn @media đều hoạt động tốt nhưng ngay sau khi tôi đặt độ rộng màn hình tối đa cao hơn 1024px, quy tắc cho chiều rộng cao hơn sẽ được áp dụng cho mọi thứ.

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

vì bạn có thể thấy 1024px (và truy vấn chiều rộng tối đa 800px) không thay đổi chiều rộng #wrap và làm việc tốt. Ngay sau khi tôi thêm truy vấn chiều rộng tối đa 1400px, nó thay đổi thành 72% cho TẤT CẢ kích thước và thực hiện tương tự cho bất kỳ phần tử nào - ví dụ: nếu tôi đặt #slider img để có lề 40px, nó sẽ hiển thị ở TẤT CẢ kích cỡ mặc dù nó chỉ ở độ rộng tối đa 1400px.

Tôi có thiếu thứ gì đó thực sự rõ ràng không? Đã cố gắng làm việc này trong 2 ngày qua! Cảm ơn, John

Answer 1

Tôi không chắc chắn tôi hoàn toàn tuân theo, nhưng các quy tắc @media của bạn cho thấy đây là hành vi bạn muốn. Nếu màn hình là 1400px và thấp hơn chiều rộng của #wrap sẽ là 72%, điều này bao gồm tất cả các kích thước khác được đề cập trong các truy vấn phương tiện khác.

Nếu bạn muốn nó chỉ áp dụng giữa 1024px và 1400px bạn cần phải thay đổi nó để ...

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

EDIT Bạn cũng cần phải nhớ rằng đặt vấn đề trong CSS ...

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

Đối với màn hình trên 1024px, chiều rộng #wrap sẽ là 72% vì chúng sẽ chỉ khớp với truy vấn phương tiện đầu tiên. Nếu màn hình dưới 1024px, chiều rộng của #wrap sẽ là 100%, mặc dù nó sẽ được đối sánh bởi cả hai truy vấn phương tiện. CSS mà sẽ được trả lại cho một màn hình dưới 1024px sẽ trông giống như ...

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

quy định sau này trong stylesheet đè quy tắc trước http://www.w3.org/TR/CSS21/cascade.html#cascading-order 6.4.1 điểm 4. Do đó, nếu bạn đổi thứ tự của các quy tắc .

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

Chiều rộng của #wrap sẽ 72% cho TẤT CẢ các màn hình kích thước lên đến 1400px vì một màn hình dưới 1024px sẽ thấy cả hai quy tắc như thể chúng là ...

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

Một màn hình trên 1024px sẽ xem ...

#wrap { 
width: 72%; 
} 

Cả hai đều có cùng kết quả.