樣式的改變使用C3的媒體查詢
行為和功能的改變使用JS的媒體查詢
matchMedia()方法參數(shù)可寫(xiě)任何一個(gè)CSS@media規(guī)則，返回的是新的MediaQueryList對(duì)象，該對(duì)象有兩個(gè)屬性

• media：查詢語(yǔ)句的內(nèi)容
• matches：檢查查詢結(jié)果，返回boolean

還有兩個(gè)方法

• addListener()：添加一個(gè)新的監(jiān)聽(tīng)器函數(shù)，查詢結(jié)果改變時(shí)，調(diào)用指定回調(diào)
• removeListener()：刪除之前添加的監(jiān)聽(tīng)器，若不存在則不執(zhí)行任何操作

使用:

var result = window.matchMedia('(max-width:418px)'); //要加括號(hào) var result2 = window.matchMedia('(max-width:768px)'); var result3 = window.matchMedia('(max-width:992px)');if(result.matches) {console.log("超小屏幕(<=418)");//do something...}else if(result2.matches){console.log("小屏幕(>768&<=992)");//do something...}else if(result3.matches){console.log("中等屏幕(>992&<=1200)");//do something...}else{console.log("大屏幕(>1200)");}

但此方式只能是頁(yè)面首次或重新加載時(shí)才生效，若要像CSS媒體查詢一樣隨著頁(yè)面大小改變做出反應(yīng)，就要使用addListener()方法監(jiān)聽(tīng)

var sqls = [window.matchMedia('(max-width:418px)'), //和CSS一樣，也要注意順序！window.matchMedia('(max-width:768px)'),window.matchMedia('(max-width:992px)'),window.matchMedia('(max-width:1200px)')]function mediaMatches() {if(sqls[0].matches){console.log('<=418'); //do something...}else if(sqls[1].matches){console.log('>418 & <=768'); // do something...}else if(sqls[2].matches){console.log('>768 & <=992'); // do something...}else if(sqls[3].matches){console.log('> 992 & <=1200'); // do something...}else {console.log('>1200');}}mediaMatches(); //頁(yè)面首次加載for(var i = 0; i < sqls.length; i++){sqls[i].addListener(mediaMatches);}

為每個(gè)MediaQueryList對(duì)象添加監(jiān)聽(tīng)器，每個(gè)對(duì)象查詢結(jié)果只有ture和false，當(dāng)某個(gè)對(duì)象的查詢結(jié)果改變時(shí)都會(huì)調(diào)用指定回調(diào)函數(shù)mediaMatches，這樣就可以在每次頁(yè)面大小改變時(shí)執(zhí)行某些行為

參考資料

Window.matchMedia()方法|菜鳥(niǎo)教程
js如何使用媒體查詢

轉(zhuǎn)載于:https://www.cnblogs.com/Grani/p/10441810.html

總結(jié)

以上是生活随笔為你收集整理的JS媒体查询的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。