Truy vấn phương tiện truy xuất dữ liệu như thế nào?

Question

Ví dụ:

<!-- CSS media query on a link element --> 
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> 

<!-- CSS media query within a style sheet --> 
<style> 
@media (max-width: 600px) { 
    .facet_sidebar { 
    display: none; 
    } 
} 
</style> 

ở đâu và như thế nào CSS3 lấy dữ liệu cho chiều rộng tối đa và chiều cao của thiết bị và loại thiết bị và tỉ lệ vv?

[EDIT] Tôi có phải là nhà phát triển cần làm điều gì đó khác là điểm mấu chốt của những gì tôi đang cố gắng tìm ra. Nhưng một lời giải thích của các bên trong (khái niệm là tốt) sẽ được đánh giá rất nhiều!

Answer 1

Vâng, đó không phải là "CSS3", người truy xuất dữ liệu từ thiết bị/chế độ xem - sau đây có tên là "phương tiện". Dữ liệu đó được điền bởi trình duyệt.

Sau khi thực hiện điều đó, trình duyệt sẽ lặp lại từng truy vấn phương tiện trong CSS của bạn và cố gắng khớp nó với dữ liệu phương tiện được điền. Nếu nó khớp, thì CSS được áp dụng.

Mỗi khi có sự thay đổi trong bất kỳ nguồn dữ liệu đa phương tiện nào, trình duyệt sẽ biết và sẽ làm lại mọi thứ, gây ra repaint/reflow processes đã biết.

Là nhà phát triển, tôi muốn nói với bạn: đừng lo lắng về hiệu suất trong những trường hợp này. Tái cấu trúc hiệu suất phải chỉ xảy ra khi trang của bạn thực sự bị chậm; cố gắng tăng tốc thời gian hiển thị tổng thể của trang của bạn trong 5 mili giây là vô ích, mắt người không thể hiểu được nó.