注意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);

参考

https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/media