5

例如：

<!-- 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 在哪里以及如何检索设备的最大宽度和高度以及设备类型和纵横比等数据？

[编辑] 作为开发人员，我是否需要做其他事情是我想要弄清楚的底线。但是内部结构的解释（概念上很好）将不胜感激！

4

1 回答 1

5

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

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

每当这些媒体数据中的任何一个发生变化时，浏览器都会知道并将再次执行所有操作，从而导致已知的重绘/重排过程。

作为开发人员，我想对您说：在这些情况下不要担心性能。只有当您的页面真的变慢时，才必须进行性能重构；试图在 5 毫秒内加快页面整体渲染时间是没有用的，人眼无法感知。

于 2013-07-18T19:23:19.037 回答