JS媒體查詢

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

• media：查詢語句的內容
• matches：檢查查詢結果，返回boolean

還有兩個方法

• addListener()：添加一個新的監聽器函數，查詢結果改變時，調用指定回調
• removeListener()：刪除之前添加的監聽器，若不存在則不執行任何操作

使用:

var result = window.matchMedia('(max-width:418px)'); //要加括號
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)");
  }

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

 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(); //頁面首次加載

    for(var i = 0; i < sqls.length; i++){
        sqls[i].addListener(mediaMatches);
    }

為每個MediaQueryList對象添加監聽器，每個對象查詢結果只有ture和false，當某個對象的查詢結果改變時都會調用指定回調函數mediaMatches，這樣就可以在每次頁面大小改變時執行某些行為

參考資料

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