window.matchMedia

概述

该方法用来检查media   query语句。

var result = window.matchMedia("(min-width: 600px)");

它返回一个MediaQueryList对象。该对象有以下两个属性。

• media：查询语句的内容。

• matches：如果查询结果为真，值为true，否则为false。

var result = window.matchMedia("(min-width: 600px)");    result.media  // (min-width: 600px)    result.matches  // true

一个简单的用法，就是根据查询结果，加载相应的样式表。

var result = window.matchMedia("(min-width: 600px)");    if (result.matches){    document.write('<link rel="stylesheet"                     href="small.css">');  }

监听事件

window.matchMedia方法返回的MediaQueryList，还可以监听事件。如果查询结果发生变化，就调用指定的回调函数。

var result = window.matchMedia("(min-width: 600px)");    result.addListener(sizeChange);    function sizeChange(result) {        v = document.getElementById("myDiv");        if (result.matches) {          v.innerHTML = "getting big" + "<br/>" + result.media;      } else {          v.innerHTML = "getting small" + "<br/>"+ result.media;      }    }

与之对应的还有一个removeListener方法，用来取消事件的监听。

result.removeListener(sizeChange);