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

<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() 查询，例如：

<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博客

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

最新文章