使用window.matchMedia()匹配多個CSS媒體查詢(1)

cenfeng發表於2019-08-08

一個常見的問題是如何使用它 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>


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69933200/viewspace-2653071/,如需轉載,請註明出處,否則將追究法律責任。

相關文章