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

一个常见的问题是如何使用它 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>

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

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