使用window.matchMedia（）匹配多個CSS媒體查詢（3）

cenfeng發表於2019-08-09
CSS

 找出 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/，如需轉載，請註明出處，否則將追究法律責任。

相關文章