diff options
Diffstat (limited to 'files/fr/web/api/window/matchmedia/index.md')
-rw-r--r-- | files/fr/web/api/window/matchmedia/index.md | 80 |
1 files changed, 37 insertions, 43 deletions
diff --git a/files/fr/web/api/window/matchmedia/index.md b/files/fr/web/api/window/matchmedia/index.md index 77fea4b292..bc1748b1cc 100644 --- a/files/fr/web/api/window/matchmedia/index.md +++ b/files/fr/web/api/window/matchmedia/index.md @@ -3,49 +3,43 @@ title: window.matchMedia slug: Web/API/Window/matchMedia translation_of: Web/API/Window/matchMedia --- -<div>{{ApiRef}}</div> - -<p>Retourne un nouvel objet {{domxref("MediaQueryList")}} contenant les résultats de la chaîne de caractères <a href="/en-US/docs/CSS/Media_queries">media query</a> spécifiée.</p> -<h2 id="Syntax">Syntaxe</h2> -<pre class="syntaxbox"><em>mql</em> = window.matchMedia(<em>mediaQueryString</em>)</pre> -<p>Ici, <code>mediaQueryString</code> est une chaîne de caractère représentant la media query pour laquelle on retourne un nouvel objet {{domxref("MediaQueryList")}}.</p> -<h2 id="Example">Exemple</h2> -<pre class="brush: js">if (window.matchMedia("(min-width: 400px)").matches) { +{{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 */ -}</pre> -<p>Ce code permet de gérer la mise en page d'une manière différente quand l'écran est moins large.</p> -<p>Voir <a href="/en-US/docs/DOM/Using_media_queries_from_code">Utiliser les media queries avec du code</a> pour plus d'exemples.</p> - -<h2 id="Specifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSSOM View", "#dom-window-matchmedia", "Window.matchMedia()")}}</td> - <td>{{Spec2("CSSOM View")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Window.matchMedia")}}</p> - -<h2 id="See_also">Voir aussi</h2> - -<ul> - <li><a href="/en-US/docs/CSS/Media_queries">Media queries</a></li> - <li><a href="/en-US/docs/DOM/Using_media_queries_from_code">Using media queries from code</a></li> - <li>{{domxref("MediaQueryList")}}</li> - <li>{{domxref("MediaQueryListListener")}}</li> -</ul> +} +``` + +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")}} |