这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

一个MediaQueryList对象在一个document上维持着一系列的媒体查询,并负责处理当媒体查询在其document上发生变化时向监听器进行通知的发送。

如果你需要以编程方式来检测一个document上的媒体查询的值的变化,这个MediaQueryList对象使得通过观察其document而检测它的媒体查询的值的变化成为可能,而不是周期性地对这些媒体查询的值进行检查。

方法概述

void addListener(MediaQueryListListener listener);
void removeListener(MediaQueryListListener listener);

属性

Property Type Description
matches boolean 如果当前document匹配该媒体查询列表则其值为true;反之其值为false。只读。
media DOMString 序列化的媒体查询列表。

方法

addListener()

在媒体查询列表上增加一个新的监听器,如果列表中已经存在了这个指定的监听器,这个方法将失去作用。

void addListener(
  MediaQueryListListener listener
);

参数 ( 针对addListener方法)

listener
当其媒体查询的求值结果发生变化时,该MediaQueryListListener 对象将会被调用。

removeListener()

从媒体查询列表中移除一个监听器,如果列表中不存在这个指定的监听器,则这个方法将失去作用。

void removeListener(
  MediaQueryListListener listener
);

参数 (针对removeListener方法)

listener
MediaQueryListListener对象将停止访问媒体查询的求值结果发生的变化。

浏览器通用性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) 6.0 (6.0) 10 ? ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

详述

请参阅

文档标签和贡献者

此页面的贡献者: teoli, focus, ziyunfei
最后编辑者: teoli,