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

cenfeng發表於2019-08-08
CSS

一個常見的問題是如何使用它 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/，如需轉載，請註明出處，否則將追究法律責任。

相關文章