MatchMedia API

注意matchMedia爲實驗性語法文檔可能被從新修訂，後面有可能會改變語法，在生產中請配合matchMedia polyfill使用

經過媒體查詢，您能夠根據各類設備特徵和參數的值或者是否存在來調整您的網站或應用；

上面是 MDN 對媒體查詢的定義，簡單狀況經過 css 媒體查詢 調整頁面已經足夠了，不過如今頁面交互和功能愈來愈多，好比一個頁面要響應式佈局，同時在不一樣屏幕下頁面結構不一樣，是否是感受有些力不從心了，下面介紹一下matchMedia。

使用方法

var mqList = window.matchMedia(mediaQueryString);
複製代碼

matchMedia 能夠實現編程方法式媒體查詢，參數mediaQueryString爲媒體語句，返回類型爲MediaQueryList，下面是一個例子

if (window.matchMedia("(min-width: 400px)").matches) {
  // 窗口大於等於400 狀況
} else {
  // 窗口小於400
}
複製代碼

MediaQueryList

• 屬性

  • matches:boolean： 若是當前 document 匹配該媒體查詢列表則其值爲 true；反之其值爲 false。只讀；
  • media:DOMString 序列化的媒體查詢列表；

• 方法

  • addListener(call: Function):void
  • removeListener(call: Function):void

addListener

MediaQueryList.addListener(func);
複製代碼

func 接收一個參數，第一版參數的類型爲MediaQueryListListener 新修訂的參數類型爲MediaQueryListEvent,

var mql = window.matchMedia("(max-width: 600px)");

function screenTest(e) {
  if (e.matches) {
    // 屏幕小於等於600
  } else {
    // 屏幕大於600
  }
}
mql.addListener(screenTest);
複製代碼

removeListener

MediaQueryList.removeListener(func);
複製代碼

func 表示要刪除的回調函數的函數或函數引用

var mql = window.matchMedia("(max-width: 600px)");

function screenTest(e) {
  if (e.matches) {
    // 屏幕小於等於600
  } else {
    // 屏幕大於600
  }
}

mql.addListener(screenTest);

// 取消監聽
mql.removeListener(screenTest);
複製代碼

參考

developer.mozilla.org/en-US/docs/…