一个常见的问题是如何使用它 window.matchMedia() 来对多个CSS媒体查询做出反应。在 JavaScript中的CSS媒体查询匹配 教程中，我们快速概述并使用它来响应单个CSS媒体查询更改： window.matchMedia()

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

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

最新文章