在水平和垂直调整浏览器窗口大小时，将显示不同的布尔值，以反映当前匹配的媒体查询。
我们现在有了连接多个媒体查询的基本模式
window.matchMedia()
，虽然像很多东西一样，魔鬼在细节中。
当我们有一个响应所有媒体查询的处理函数时，它意味着将多次调用此函数。
这本身不是问题，实际上是设计的。
在上面的示例中，处理函数
window.matchMedia()
连接到3个不同的
window.matchMedia()
查询，因此被称为以下次数：
-
页面首次加载时三次，每次处理页面首次加载时可能匹配的每个查询
-
每次 满足输入查询之一 的 阈值 时。 如果用户将浏览器的大小从900px调整为860px，然后调整为700px，则
(max-width: 860px)当浏览器超过860px阈值时，将触发一次 查询“ ”。 将窗口大小调整为900px会再次触发相同的查询。
虽然多次调用我们的处理函数是为了处理我们的所有
window.matchMedia()
查询，但您可能不希望在每次调用期间运行此函数内的所有内容，至少为了提高效率。
在上面的示例中，当匹配“
(max-width: 860px)
”时，将运行函数内的所有3行，而不是仅将“
＃match1
”元素设置为相应布尔值的行。
这可以通过基于触发函数的媒体查询选择性地运行代码来避免，这是我们接下来要看的。
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/69933200/viewspace-2653146/ ，如需转载，请注明出处，否则将追究法律责任。
