Các quy tắc cho chồng chéo truy vấn phương tiện CSS là gì?
Xếp tầng.
@mediacác quy tắc là minh bạch đối với phân tầng, vì vậy khi hai hoặc nhiều @mediaquy tắc khớp cùng một lúc, trình duyệt phải áp dụng các kiểu trong tất cả các quy tắc phù hợp và phân giải tầng cho phù hợp. 1
Điều gì sẽ xảy ra, trên tất cả các trình duyệt hỗ trợ, chính xác là 20em và 45em?
Với chiều rộng chính xác là 20em, cả truy vấn phương tiện thứ nhất và thứ hai của bạn sẽ khớp nhau. Trình duyệt sẽ áp dụng các kiểu trong cả @mediaquy tắc và phân tầng tương ứng, vì vậy nếu có bất kỳ quy tắc xung đột nào cần được ghi đè, quy tắc được khai báo cuối cùng sẽ thắng (tính cho các bộ chọn cụ thể !important, v.v.). Tương tự như vậy đối với truy vấn phương tiện thứ hai và thứ ba khi khung nhìn rộng chính xác 45em.
Xem xét mã mẫu của bạn, với một số quy tắc kiểu thực tế được thêm vào:
@media (max-width: 20em) {
.sidebar { display: none; }
}
@media (min-width: 20em) and (max-width: 45em) {
.sidebar { display: block; float: left; }
}
Khi khung nhìn của trình duyệt rộng chính xác 20em, cả hai truy vấn phương tiện này sẽ trả về true. Theo tầng, display: blockghi đè display: nonevà float: leftsẽ áp dụng trên bất kỳ phần tử nào có lớp.sidebar .
Bạn có thể coi đó là việc áp dụng các quy tắc như thể các truy vấn phương tiện không có ở đó để bắt đầu:
.sidebar { display: none; }
.sidebar { display: block; float: left; }
Có thể tìm thấy một ví dụ khác về cách phân tầng diễn ra khi một trình duyệt khớp với hai hoặc nhiều truy vấn phương tiện trong câu trả lời khác này .
Tuy nhiên, hãy cảnh báo rằng nếu bạn có các khai báo không trùng lặp trong cả hai @mediaquy tắc, thì tất cả các quy tắc đó sẽ được áp dụng. Điều xảy ra ở đây là sự kết hợp của các khai báo trong cả hai @mediaquy tắc, không chỉ là quy tắc sau hoàn toàn khắc phục quy tắc trước ... điều này đưa chúng tôi đến câu hỏi trước đó của bạn:
Làm cách nào để chúng tôi sắp xếp các truy vấn phương tiện một cách chính xác để tránh chồng chéo?
Nếu bạn muốn tránh chồng chéo, bạn chỉ cần viết các truy vấn phương tiện loại trừ lẫn nhau.
Hãy nhớ rằng tiền tố min-và max-có nghĩa là "bao gồm tối thiểu" và "bao gồm tối đa"; điều này có nghĩa là (min-width: 20em)và (max-width: 20em)sẽ phù hợp với một khung nhìn có chiều rộng chính xác là 20em.
Có vẻ như bạn đã có một ví dụ, đưa chúng tôi đến câu hỏi cuối cùng của bạn:
Tôi đã thấy mọi người sử dụng: những thứ như 799px và sau đó là 800px, nhưng chiều rộng màn hình là 799,5 px thì sao? (Rõ ràng không phải trên màn hình thông thường, mà là màn hình võng mạc?)
Điều này tôi không hoàn toàn chắc chắn; tất cả các giá trị pixel trong CSS đều là pixel logic và tôi đã rất khó tìm được trình duyệt báo cáo giá trị pixel phân số cho chiều rộng khung nhìn. Tôi đã thử thử nghiệm với một số iframe nhưng không thể tìm ra bất kỳ điều gì.
Từ các thử nghiệm của tôi, có vẻ như Safari trên iOS làm tròn tất cả các giá trị pixel phân số để đảm bảo rằng một trong hai max-width: 799pxvà min-width: 800pxsẽ khớp, ngay cả khi chế độ xem thực sự là 799,5px (dường như khớp với cái cũ).
1 Mặc dù không có điều nào trong số này được nêu rõ ràng trong mô-đun Quy tắc có điều kiện hoặc mô-đun Xếp tầng ( mô-đun sau này hiện đang được dự kiến viết lại), phân tầng được ngụ ý là diễn ra bình thường, vì thông số chỉ đơn giản là áp dụng các kiểu trong bất kỳ và tất cả các @mediaquy tắc phù hợp với trình duyệt hoặc phương tiện.