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

cenfeng發表於2019-08-09

 找出 window.matchMedia() 觸發處理函式的查詢

使用單個函式處理所有 window.matchMedia()  查詢匹配,有用 - 如果不是必要的話 - 有時可以確定哪個確切的查詢觸發了該函式。 這與簡單地確定查詢是否成功匹配不同,我們可以使用 matches 儲存在陣列中的每個查詢 屬性 輕鬆找出

1
2
3
4
6
7
8
9
10
11
<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部落格 ” ,連結:http://blog.itpub.net/69933200/viewspace-2653167/,如需轉載,請註明出處,否則將追究法律責任。

相關文章