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

 找出 window.matchMedia() 触发处理函数的查询

使用单个函数处理所有 window.matchMedia()  查询匹配，有用 - 如果不是必要的话 - 有时可以确定哪个确切的查询触发了该函数。 这与简单地确定查询是否成功匹配不同，我们可以使用 matches 存储在数组中的每个查询 的 属性 轻松找出 ：

1 2 3 4 五 6 7 8 9 10 11

<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" > function mediaqueryresponse（mql）{</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >      if （mqls [0] .matches）{ //在width：860px媒体查询匹配时执行某些操作</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;" >      if （mqls [1] .matches）{ //在宽度：600px媒体查询匹配时执行某些操作</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;" >      if （mqls [2] .matches）{ //在高度：500px媒体查询匹配时执行某些操作</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;" > }</font></font>

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

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