媒体查询如何检索数据？

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.

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

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