JavaScript 獲取CSS媒體查詢信息

var result = window.matchMedia('(max-width: 700px)');

if (result.matches) {
  console.log('頁面寬度小於等於700px');
} else {
  console.log('頁面寬度大於700px');
}

 

window.matchMedia方法返回的MediaQueryList對象有兩個方法，用來監聽事件：addListener方法和removeListener方法。如果mediaQuery查詢結果發生變化，就調用指定的回調函數。

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

// 指定回調函數
mql.addListener(mqCallback);

function mqCallback(mql) {
  if (mql.matches) {
    // 寬度小於等於700像素
  } else {
    // 寬度大於700像素
  }
}

// 撤銷回調函數
mql.removeListener(mqCallback);

 

原文鏈接：http://javascript.ruanyifeng.com/dom/css.html#toc15