Using media queries from code

使用代码中的媒体查询

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 */
}

接收查询通知

如果您需要持续了解对查询的评估结果所做的更改，则注册侦听器比查询查询的结果更有效。为此，请在对象addListener()上调用方法MediaQueryList，使用回调函数在媒体查询状态更改（例如，媒体查询测试进行true到false）时调用：

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

浏览器兼容性