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

嗯，从设备/视口中检索数据的不是“CSS3” - 以下称为“媒体”。这些数据由浏览器填充。

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

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

作为开发者，我想告诉你：在这些情况下不要担心性能问题。性能重构必须仅在您的页面变得缓慢时才会发生;试图在5毫秒内加快你的页面整体渲染时间是没用的，人眼无法感知它。

媒体查询如何检索数据？

1 个答案: