概述
该方法用来检查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);