/
index.md
73 lines (48 loc) · 2.21 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
---
title: MediaQueryList
slug: Web/API/MediaQueryList
---
{{APIRef("CSSOM")}}
一个 `MediaQueryList` 对象在一个 {{DOMxRef("document")}} 上维持着一系列的[媒体查询](/zh-CN/docs/CSS/Media_queries),并负责处理当媒体查询在其 document 上发生变化时向监听器进行通知的发送。
如果你需要以编程方式来检测一个 document 上的媒体查询的值的变化,这个 `MediaQueryList` 对象使得通过观察其 document 而检测它的媒体查询的值的变化成为可能,而不是周期性地对这些媒体查询的值进行检查。
## 方法概述
```
void addListener(MediaQueryListListener listener);
void removeListener(MediaQueryListListener listener);
```
## 实例属性
_`MediaQueryList` 接口从它的父接口 {{DOMxRef("EventTarget")}} 继承了属性。_
- {{DOMxRef("MediaQueryList.matches", "matches")}} {{ReadOnlyInline}}
- : 一个布尔值,如果当前 {{DOMxRef("document")}} 与媒体查询列表相匹配,则返回 `true`,否则返回 `false`。
- {{DOMxRef("MediaQueryList.media", "media")}} {{ReadOnlyInline}}
- : 代表序列化的媒体查询的字符串。
## 方法
### addListener()
在媒体查询列表上增加一个新的监听器,如果列表中已经存在了这个指定的监听器,这个方法将失去作用。
```
void addListener(
MediaQueryListListener listener
);
```
#### 参数 ( 针对 addListener 方法)
- `listener`
- : 当其媒体查询的求值结果发生变化时,该 {{DOMxRef("MediaQueryListListener")}} 对象将会被调用。
### removeListener()
从媒体查询列表中移除一个监听器,如果列表中不存在这个指定的监听器,则这个方法将失去作用。
```
void removeListener(
MediaQueryListListener listener
);
```
#### 参数 (针对 removeListener 方法)
- `listener`
- : 该 {{DOMxRef("MediaQueryListListener")}}对象将停止访问媒体查询的求值结果发生的变化。
## 规范
{{Specifications}}
## 浏览器兼容性
{{Compat}}
## 参见
- [CSS 媒体查询](/zh-CN/docs/CSS/Media_queries)
- [通过代码使用媒体查询](/zh-CN/docs/DOM/Using_media_queries_from_code)
- {{DOMxRef("window.matchMedia()")}}
- {{DOMxRef("MediaQueryListListener")}}