读取媒体查询

使用window.matchMedia()方法可以访问CSS的Media Query语句。window.matchMedia()方法接受一个mediaQuery语句的字符串作为参数，返回一个MediaQueryList对象。该对象有以下两个属性。

• media：返回所查询的mediaQuery语句字符串。
• matches：返回一个布尔值，表示当前环境是否匹配查询语句。

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

result.media  // (min-width: 600px)
result.matches  // true

【示例1】下面示例根据mediaQuery是否匹配当前环境，执行不同的JavaScript代码。

var  result = window.matchMedia('(max-width: 700px)');
if  (result.matches) {
    console.log('页面宽度小于等于700px');
}  else {
    console.log('页面宽度大于700px');
}

【示例2】下面示例根据mediaQuery是否匹配当前环境，加载相应的CSS样式表。

var  result = window.matchMedia("(max-width: 700px)");
if  (result.matches){
    var linkElm = document.createElement('link');
    linkElm.setAttribute('rel', 'stylesheet');
    linkElm.setAttribute('type', 'text/css');
    linkElm.setAttribute('href',  'small.css');
    document.head.appendChild(linkElm);
}

注意，如果window.matchMedia无法解析mediaQuery参数，返回的总是false，而不是报错。例如：

window.matchMedia('bad  string').matches           // false
window.matchMedia方法返回的MediaQueryList对象有两个方法，用来监听事件：addListener方法和removeListener方法。如果mediaQuery查询结果发生变化，就调用指定的回调函数。例如：
var  mql = window.matchMedia("(max-width: 700px)");
// 指定回调函数
mql.addListener(mqCallback);
// 撤销回调函数
mql.removeListener(mqCallback);
function  mqCallback(mql) {
    if  (mql.matches) {
        // 宽度小于等于700像素
    }  else {
        // 宽度大于700像素
    }
}

上面代码中，回调函数的参数是MediaQueryList对象。回调函数的调用可能存在两种情况。一种是显示宽度从700像素以上变为以下，另一种是从700像素以下变为以上，所以在回调函数内部要判断一下当前的屏幕宽度。