媒体查询：测试媒体查询 | Media Queries: Testing media queries

DOM提供了可以测试一个媒体查询编程的结果的功能，通过MediaQueryList接口和它的方法和属性。

创建MediaQueryList对象后，可以检查查询的结果，或者在结果更改时收到通知。

创建媒体查询列表

在计算媒体查询的结果之前，需要创建MediaQueryList表示查询的。若要执行此操作，请使用window.matchMedia方法。

例如，若要设置一个查询列表，以确定设备是否处于横向或纵向方向，请执行以下操作：

var mediaQueryList = window.matchMedia("(orientation: portrait)");

检查查询结果

一旦您创建了媒体查询列表，就可以通过查看其值来检查查询结果。matches拥有值：

if (mediaQueryList.matches) {
  /* The viewport is currently in portrait orientation */
} else {
  /* The viewport is not currently in portrait orientation, therefore landscape */
}

接收查询通知

如果您需要持续地了解对查询的计算结果的更改，则注册一个听者而不是轮询查询%27的结果。要做到这一点，请调用addListener()方法的MediaQueryList对象，并在媒体查询状态更改%28e时调用回调函数。，媒体查询测试将从true到false29%：

var mediaQueryList = window.matchMedia("(orientation: portrait)"); // Create the query list.
function handleOrientationChange(mql) { ... } // Define a callback function for the event listener.
mediaQueryList.addListener(handleOrientationChange); // Add the callback function as a listener to the query list.

handleOrientationChange(); // Run the orientation change handler once.

此代码创建定向测试媒体查询列表，然后向其添加一个事件侦听器。添加监听器后，我们还直接调用侦听器。这使得侦听器根据当前设备方向执行调整；否则，我们的代码可能假设设备在启动时处于纵向模式，即使它实际上处于横向模式。

该handleOrientationChange()函数将查看查询的结果，并处理任何我们需要做的方向更改：

function handleOrientationChange(evt) {
  if (evt.matches) {
    /* The viewport is currently in portrait orientation */
  } else {
    /* The viewport is currently in landscape orientation */
  }
}

上面，我们将参数定义为evt- 一个事件对象。这是有道理的，因为以标准方式更新的MediaQueryList句柄事件监听器的实现。他们不再使用不同寻常的MediaQueryListListener机制，而是使用标准的事件监听器设置，将类型为事件的事件对象 MediaQueryListEvent作为参数传递给回调函数。

此事件对象还包括media和match属性的这些特性，因此可以查询MediaQueryList直接访问它，或者访问事件对象。

结束查询通知

若要停止接收有关媒体查询值更改的通知，请调用removeListener()在MediaQueryList，将先前定义的回调函数的名称传递给它：

mediaQueryList.removeListener(handleOrientationChange);

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	9	(Yes)	6.0 (6.0)	10	12.1	5
New version spec update	(Yes)	?	55 (55)	No support	(Yes)	?

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile	Chrome for Android
Basic support	?	(Yes)	?	?	?	?	?
New version spec update	No support	?	55.0 (55)	No support	(Yes)	?	(Yes)

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18