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

为了确定哪个 window.matchMedia() 查询实际触发了处理函数，我们需要不仅仅检查 matches 属性，还要查看 media  传入 MediaQueryList  对象 的 属性 ，它返回触发查询列表的序列化字符串。 在处理函数中， MediaQueryList  对象作为函数的第一个参数传递，或者在本例中为红色参数：

1 2 3

<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;" >      console.log（mql.media） //返回“（max-width：860px）”例如</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> }</font></font>

为了使事情稍微复杂化 media ， MediaQueryList  对象 属性 的返回值  在非IE（IE11）和IE浏览器之间略有不同。 鉴于以下 window.matchMedia() 查询，例如：

1	<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" > var mql = window.matchMedia（“（max-width：860px）”）</font></font>

在非IE浏览器中， mql.media 返回完全“  (max-width: 860px) ”，而在IE中，它返回“  all and (max-width:860px)"  而不是。所以IE返回不同的是以下内容：

• all 在缺少查询中指定的媒体的情况下，在字符串前面 添加“  ”的媒体

• 删除每个属性和属性值之间的任何空格，因此“  max-width:860px ”中 没有空格 。

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

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