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

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

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

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

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

最新文章

ITPub博客

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

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

最新文章

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