106.媒体查询是如何工作的？

媒体查询的工作原理是，当浏览器加载页面时，它会检查页面中的每个媒体查询，以确定哪些规则应该应用。如果媒体查询匹配当前设备，则其中的CSS规则将被应用。如果不匹配，则其中的CSS规则将被忽略。这样，您就可以根据设备的特性来为不同的设备提供不同的样式，从而实现响应式设计。

● 以我们之前的代码来具体演示

@media(max-width: 1200px) {
  .section-hero {
    background-color: red;
  }
}

当页面的小于1200px时，页面背景就变成了红色

@media (max-width: 600px) {  ##当窗口大小小于600px时候，会触发下面的border
  .section-hero {
    border: 20px dashed blue;
  }
}

媒体查询的工作原理通过这个例子我相信你已经明白了，在实际的应用中，我们需要找到适用的断点来加以适用；