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

一个常见的问题是如何使用它window.matchMedia() 来对多个CSS媒体查询做出反应。在JavaScript中的CSS媒体查询匹配教程中，我们快速概述 并使用它来响应单个CSS媒体查询更改： window.matchMedia()

1 2 3 4 五 6 7 8 9 10 11 12 13

<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">function maxwidth800action（mql）{</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">     if（mql.matches）{</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">         console.log（“您的窗口是800px或更低”）</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">     }</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">     其他{</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">         console.log（“你的窗口大于800px”）</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">     }</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> }</font></font><font></font> <font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> var mql = window.matchMedia（“screen and（max-width：800px）”）</font></font><font></font> <font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> maxwidth800action（mql）//在运行时调用maxwidth800action（）</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> mql.addListener（maxwidth800action）//每当触发媒体查询时调用maxwidth800action（）</font></font>

在这里，我们只监视一个CSS媒体查询window.matchMedia()，即“ screen and (max-width: 800px)”，并在浏览器跨越该阈值时作出反应。

 响应多个CSS媒体查询

为了响应使用多个CSS媒体查询window.matchMedia()，我们基本上只是多次重复上述一个媒体查询的蓝图。为了简化代码，我们可以先使用数组存储所有window.matchMedia()查询，然后使用for循环来调用处理所有查询的单个函数。让我们看看现在：

1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16

<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">var mqls = [// window.matchMedia（）查询列表</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">     window.matchMedia（“（max-width：860px）”），</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">     window.matchMedia（“（max-width：600px）”），</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;&