一个常见的问题是如何使用它window.matchMedia()
来对多个CSS媒体查询做出反应。在JavaScript中的CSS媒体查询匹配教程中,我们快速概述 并使用它来响应单个CSS媒体查询更改: window.matchMedia()
1 2 3 4 五 6 7 8 9 10 11 12 13 |
<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> |
在这里,我们只监视一个CSS媒体查询window.matchMedia()
,即“ screen and (max-width: 800px)
”,并在浏览器跨越该阈值时作出反应。
响应多个CSS媒体查询
为了响应使用多个CSS媒体查询window.matchMedia()
,我们基本上只是多次重复上述一个媒体查询的蓝图。为了简化代码,我们可以先使用数组存储所有window.matchMedia()
查询,然后使用for
循环来调用处理所有查询的单个函数。让我们看看现在:
1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 |
<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" > var mqls = [ // window.matchMedia()查询列表</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> window.matchMedia(“(max-width:860px)”),</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" > window.matchMedia(“(max-width:600px)”),</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;&
|