css - 媒体查询如何检索数据？

Question

例如:

<!-- 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>

CSS3 在何处以及如何检索设备的最大宽度和高度以及设备类型和纵横比等数据？

[编辑]作为开发人员，我是否需要做其他事情是我想要弄清楚的底线。但非常感谢对内部结构的解释(概念上很好)!

Answer 1

嗯，从设备/视口(viewport)检索数据的不是“CSS3”——以下称为“媒体”。此类数据由浏览器填充。

完成后，浏览器将遍历 CSS 中的每个媒体查询，并尝试将其与填充的媒体数据进行匹配。如果匹配，则应用 CSS。

每次这些媒体数据发生变化时，浏览器都会知道并再次执行所有操作，从而导致已知的 repaint/reflow processes .

作为开发人员，我想告诉你:在这些情况下不要担心性能。只有当你的页面真的变慢的时候，性能重构才会发生；试图在 5 毫秒内加快页面整体渲染时间是没有用的，人眼无法感知。