使用window.matchMedia（）匹配多个CSS媒体查询（3）

 在水平和垂直调整浏览器窗口大小时，将显示不同的布尔值，以反映当前匹配的媒体查询。

我们现在有了连接多个媒体查询的基本模式 window.matchMedia() ，虽然像很多东西一样，魔鬼在细节中。 当我们有一个响应所有媒体查询的处理函数时，它意味着将多次调用此函数。 这本身不是问题，实际上是设计的。 在上面的示例中，处理函数 window.matchMedia()  连接到3个不同的 window.matchMedia() 查询，因此被称为以下次数：

• 页面首次加载时三次，每次处理页面首次加载时可能匹配的每个查询

• 每次 满足输入查询之一 的 阈值 时。 如果用户将浏览器的大小从900px调整为860px，然后调整为700px，则 (max-width: 860px) 当浏览器超过860px阈值时，将触发一次 查询“  ”。 将窗口大小调整为900px会再次触发相同的查询。

虽然多次调用我们的处理函数是为了处理我们的所有 window.matchMedia()  查询，但您可能不希望在每次调用期间运行此函数内的所有内容，至少为了提高效率。 在上面的示例中，当匹配“  (max-width: 860px) ”时，将运行函数内的所有3行，而不是仅将“  ＃match1  ”元素设置为相应布尔值的行。 这可以通过基于触发函数的媒体查询选择性地运行代码来避免，这是我们接下来要看的。

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/69933200/viewspace-2653146/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/69933200/viewspace-2653146/