blob: bc1748b1cc38ca66d98eb238200ca4dde03e1d6f (
plain)
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
|
---
title: window.matchMedia
slug: Web/API/Window/matchMedia
translation_of: Web/API/Window/matchMedia
---
{{ApiRef}}
Retourne un nouvel objet {{domxref("MediaQueryList")}} contenant les résultats de la chaîne de caractères [media query](/en-US/docs/CSS/Media_queries) spécifiée.
## Syntaxe
mql = window.matchMedia(mediaQueryString)
Ici, `mediaQueryString` est une chaîne de caractère représentant la media query pour laquelle on retourne un nouvel objet {{domxref("MediaQueryList")}}.
## Exemple
```js
if (window.matchMedia("(min-width: 400px)").matches) {
/* the view port is at least 400 pixels wide */
} else {
/* the view port is less than 400 pixels wide */
}
```
Ce code permet de gérer la mise en page d'une manière différente quand l'écran est moins large.
Voir [Utiliser les media queries avec du code](/en-US/docs/DOM/Using_media_queries_from_code) pour plus d'exemples.
## Spécifications
| Spécification | Statut | Commentaire |
| ---------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
| {{SpecName("CSSOM View", "#dom-window-matchmedia", "Window.matchMedia()")}} | {{Spec2("CSSOM View")}} | Définition initiale. |
## Compatibilité des navigateurs
{{Compat("api.Window.matchMedia")}}
## Voir aussi
- [Media queries](/en-US/docs/CSS/Media_queries)
- [Using media queries from code](/en-US/docs/DOM/Using_media_queries_from_code)
- {{domxref("MediaQueryList")}}
- {{domxref("MediaQueryListListener")}}
|
