-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
54 lines (41 loc) · 1.5 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
---
title: "MediaQueryListEvent: matches property"
short-title: matches
slug: Web/API/MediaQueryListEvent/matches
page-type: web-api-instance-property
browser-compat: api.MediaQueryListEvent.matches
---
{{APIRef("CSSOM")}}
The **`matches`** read-only property of the
{{DOMxRef("MediaQueryListEvent")}} interface is a boolean value that is
`true` if the {{DOMxRef("document")}} currently matches the media query list,
or `false` if not.
## Value
A boolean value; returns `true` if the {{DOMxRef("document")}}
currently matches the media query list, `false` if not.
## Examples
```js
const para = document.querySelector("p"); // This is the UI element where to display the text
const mql = window.matchMedia("(max-width: 600px)");
mql.addEventListener("change", (event) => {
if (event.matches) {
// The viewport is 600 pixels wide or less
para.textContent = "This is a narrow screen — less than 600px wide.";
document.body.style.backgroundColor = "red";
} else {
// The viewport is more than 600 pixels wide
para.textContent = "This is a wide screen — more than 600px wide.";
document.body.style.backgroundColor = "blue";
}
});
```
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- [Media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
- [Using media queries from code](/en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries)
- {{DOMxRef("window.matchMedia()")}}
- {{DOMxRef("MediaQueryList")}}
- {{DOMxRef("MediaQueryListEvent")}}