注释和共享

媒体查询(Media Queries)

我们都知道媒体查询在响应式设计中扮演着一个重要的角色，它可以让我们在不同特性的设备上应用不同的CSS样式。一种常见的应用如下：

1
2
3
4
5
6

/* 在width不大于640的设备上，aside将被隐藏 */
@media (max-width: 640px) {
  aside {
    display: none;
  }
}

其实在JavaScript中通过MediaQueryList接口，也可以进行媒体查询。

MediaQueryList是什么?

MediaQueryList(下面简称MQL)是CSSOM View Module中定义的一个接口，一个MQL对象，本质上对应一条媒体查询，通过获取它的matches属性得到查询结果。
MQL对象通过调用window.matchMedia方法获得，matchMedia接受一个媒体查询字符串作为参数，并返回对应的MQL对象。一个简单的例子如下：

1
2
3
4
5
6

const mql = window.matchMedia('(max-width: 640px)')
if (mql.matches) {
  // width <= 640px
} else {
  // width > 640px
}

mql对象还提供了change事件接口，它拥有addListener(handler)和removeListener(handler)两个方法，用于监听和移除事件，这两个方法本质上是addEventListener(‘change’, handler)和addEventListener(‘change’, handler，的简写。handler是一个回调函数，传回一个MediaQueryListEvent作为参数。

1
2
3
4
5
6
7

const mql = window.matchMedia('(max-width: 640px)')
mql.addListener(handlMediaChange) // mql.onchange = handleMediaChange

function handleMediaChange (mqle) {
  console.log(mqle.matches) // 更新后的boolean值
  console.log(mqle.media) // 对应的查询字符串
}

这能做什么?

1. 更灵活的响应式设计
   CSS中的媒体查询可以对相同的内容在不同的场景下作用不同的样式，而JS中的媒体查询可以让我们根据设备特性的变化直接修改内容，这是MQL最大的作用。

1. 在一定程度上代替UA检测

   1 2	window.matchMedia('handheld') window.matchMedia('tv')

2. 更简便的检测方案

需要注意啥?

1. MQL对象的matches是动态的
   同HTMLElement上的classList, childNodes一样(不同的是classList, childNodes都是引用类型，而matches是基本类型)，第一次通过matchMedia方法获取得到mql之后，后面媒体特性发生改变，mql.matches拿到的就是最新的值，不需要再调用一次matchMedia。

2. 兼容性
   MQL比CSS中的媒体查询出来的晚一些，所以并不代表支持CSS媒体查询的浏览器就一定支持MQL(当然支持MQL的浏览器支持CSS Media Query是没问题的)，它的兼容性如下：

注释和共享