{"id":48566,"date":"2021-09-23T10:56:27","date_gmt":"2021-09-23T08:56:27","guid":{"rendered":"https:\/\/kinsta.com\/?p=102257"},"modified":"2023-08-22T11:47:56","modified_gmt":"2023-08-22T10:47:56","slug":"media-query-javascript","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/media-query-javascript\/","title":{"rendered":"Un guide complet pour utiliser media query dans JavaScript"},"content":{"rendered":"<p>La plupart des sites web modernes utilisent des techniques de <a href=\"https:\/\/kinsta.com\/fr\/blog\/design-web-responsive\/\">conception web responsive<\/a> pour s&rsquo;assurer qu&rsquo;ils sont beaux, lisibles et utilisables sur des appareils de toute taille d&rsquo;\u00e9cran, c&rsquo;est-\u00e0-dire des t\u00e9l\u00e9phones mobiles, des tablettes, des ordinateurs portables, des \u00e9crans de PC de bureau, des t\u00e9l\u00e9visions, des projecteurs, etc.<\/p>\n<p>Les sites utilisant ces techniques ont un seul mod\u00e8le, qui modifie la mise en page en fonction des dimensions de l&rsquo;\u00e9cran :<\/p>\n<ul>\n<li>Les \u00e9crans plus petits pr\u00e9sentent g\u00e9n\u00e9ralement une vue lin\u00e9aire \u00e0 une seule colonne o\u00f9 les contr\u00f4les de l&rsquo;interface utilisateur, comme les <a href=\"https:\/\/kinsta.com\/fr\/blog\/plugins-menu-wordpress\/\">menus<\/a>, sont activ\u00e9s en cliquant sur les ic\u00f4nes (hamburger).<\/li>\n<li>Les \u00e9crans plus grands affichent plus d&rsquo;informations, peut-\u00eatre avec des colonnes lat\u00e9rales align\u00e9es horizontalement. Les contr\u00f4les de l&rsquo;interface utilisateur, comme les \u00e9l\u00e9ments de menu, peuvent toujours \u00eatre visibles pour un acc\u00e8s plus facile.<\/li>\n<\/ul>\n<p>Une grande partie du responsive web design est l&rsquo;impl\u00e9mentation d&rsquo;une media query <a href=\"https:\/\/kinsta.com\/fr\/blog\/css-wordpress\/\">CSS<\/a> ou JavaScript pour d\u00e9tecter la taille de l&rsquo;appareil et servir automatiquement le design appropri\u00e9 pour cette taille. Nous allons voir pourquoi ces requ\u00eates sont importantes et comment les utiliser, mais d&rsquo;abord, parlons du responsive design en g\u00e9n\u00e9ral.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Pourquoi le Responsive Design est-il important ?<\/h2>\n<p>Il est impossible de proposer une <a href=\"https:\/\/kinsta.com\/fr\/blog\/design-web-responsive\/\">mise en page unique<\/a> et de s&rsquo;attendre \u00e0 ce qu&rsquo;elle fonctionne partout.<\/p>\n<p>Lorsque les t\u00e9l\u00e9phones mobiles ont commenc\u00e9 \u00e0 avoir un acc\u00e8s rudimentaire au web au d\u00e9but des ann\u00e9es 2000, les propri\u00e9taires de sites cr\u00e9aient souvent deux ou trois mod\u00e8les de pages distincts vaguement bas\u00e9s sur les vues des mobiles et des ordinateurs de bureau. Cela est devenu de moins en moins pratique \u00e0 mesure que la vari\u00e9t\u00e9 des appareils augmentait de fa\u00e7on exponentielle.<\/p>\n<p>Aujourd&rsquo;hui, il existe de nombreuses tailles d&rsquo;\u00e9cran, allant des minuscules \u00e9crans de montre-bracelet aux \u00e9normes moniteurs 8 K et au-del\u00e0. M\u00eame si vous ne consid\u00e9rez que les t\u00e9l\u00e9phones portables, les appareils r\u00e9cents peuvent avoir une r\u00e9solution plus \u00e9lev\u00e9e que de nombreux ordinateurs portables bas de gamme.<\/p>\n<p>L&rsquo;utilisation des mobiles a \u00e9galement <a href=\"https:\/\/gs.statcounter.com\/platform-market-share\/desktop-mobile-tablet\" target=\"_blank\" rel=\"noopener noreferrer\">d\u00e9pass\u00e9 celle des ordinateurs de bureau<\/a>. \u00c0 moins que votre site ne soit destin\u00e9 \u00e0 un ensemble sp\u00e9cifique d&rsquo;utilisateurs, vous pouvez vous attendre \u00e0 ce que la majorit\u00e9 des gens y acc\u00e8dent depuis un smartphone. Les appareils \u00e0 petit \u00e9cran ne sont plus une r\u00e9flexion apr\u00e8s coup et doivent \u00eatre pris en compte d\u00e8s le d\u00e9part, m\u00eame si la plupart des concepteurs de sites web, des d\u00e9veloppeurs et des clients continuent d&rsquo;utiliser un PC standard.<\/p>\n<p>Google a reconnu l&rsquo;importance des appareils mobiles. Les <a href=\"https:\/\/kinsta.com\/fr\/blog\/index-google-mobile-first\/\">sites sont mieux class\u00e9s dans les recherches Google<\/a> lorsqu&rsquo;ils sont utilisables et performants sur un smartphone. Un bon contenu reste vital, mais un site \u00e0 chargement lent qui ne s&rsquo;adapte pas aux dimensions de l&rsquo;\u00e9cran de votre base d&rsquo;utilisateurs pourrait nuire \u00e0 votre entreprise.<\/p>\n<p>Enfin, pensez \u00e0 l&rsquo;accessibilit\u00e9. Un site qui fonctionne pour tout le monde, quel que soit l&rsquo;appareil qu&rsquo;ils utilisent, touchera un public plus large. L&rsquo;accessibilit\u00e9 est une obligation l\u00e9gale dans de nombreux pays, mais m\u00eame si ce n&rsquo;est pas le cas l\u00e0 o\u00f9 vous \u00eates, consid\u00e9rez que plus de spectateurs entra\u00eeneront plus de conversions et une meilleure rentabilit\u00e9.<\/p>\n\n<h2>Comment fonctionne le responsive design ?<\/h2>\n<p>La base du responsive design est <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/Media_Queries\" target=\"_blank\" rel=\"noopener noreferrer\">media query <\/a>: une technologie CSS qui peut appliquer des styles en fonction de mesures telles que le type de sortie (\u00e9cran, imprimante ou m\u00eame parole), les dimensions de l&rsquo;\u00e9cran, le ratio d&rsquo;aspect de l&rsquo;affichage, l&rsquo;orientation de l&rsquo;appareil, la profondeur des couleurs et la pr\u00e9cision du pointeur. Media query peut \u00e9galement prendre en compte les pr\u00e9f\u00e9rences des utilisateurs, notamment la r\u00e9duction des animations, le mode clair\/sombre et un contraste plus \u00e9lev\u00e9.<\/p>\n<p>Les exemples que nous avons montr\u00e9s montrent media query utilisant uniquement la largeur de l&rsquo;\u00e9cran, mais les sites peuvent \u00eatre beaucoup plus flexibles. Reportez-vous \u00e0 <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/Media_Queries\/Using_media_queries\">l&rsquo;ensemble des options sur MDN<\/a> pour plus de d\u00e9tails.<\/p>\n<p><a href=\"https:\/\/caniuse.com\/css-mediaqueries\" target=\"_blank\" rel=\"noopener noreferrer\">La prise en charge de media query est excellente<\/a> et existe dans les navigateurs depuis plus de dix ans. Seuls IE8 et les versions inf\u00e9rieures n&rsquo;ont aucune prise en charge. Ils ignorent les styles appliqu\u00e9s par media query, mais cela peut parfois \u00eatre un avantage (lisez plus loin dans la section <strong>Meilleures pratiques<\/strong> ).<\/p>\n<p>Il existe trois fa\u00e7ons standard d&rsquo;appliquer des styles \u00e0 l&rsquo;aide de media query. La premi\u00e8re charge des feuilles de style sp\u00e9cifiques dans le <a href=\"https:\/\/kinsta.com\/fr\/blog\/html-vs-html5\/\">code HTML<\/a>. Par exemple, la balise suivante charge la feuille de style <strong>wide.css<\/strong> lorsqu&rsquo;un appareil a un \u00e9cran d&rsquo;au moins 800 pixels de large :<\/p>\n<pre><code class=\"language-html\">&lt;link rel=\"stylesheet\" media=\"screen and (min-width: 800px)\" href=\"wide.css\" \/&gt;<\/code><\/pre>\n<p>Deuxi\u00e8mement, les feuilles de style peuvent \u00eatre charg\u00e9es de mani\u00e8re conditionnelle dans les fichiers CSS \u00e0 l&rsquo;aide d&rsquo;une at-rule <code>@import<\/code>:<\/p>\n<pre><code class=\"language-css\">\/* main.css *\/\n@import url('wide.css') screen and (min-width: 800px);<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Notez que <code>@import<\/code> doit \u00eatre \u00e9vit\u00e9 car chaque fichier CSS import\u00e9 bloque le rendu. Les balises HTML <code>&lt;link&gt;<\/code> sont t\u00e9l\u00e9charg\u00e9es en parall\u00e8le, alors que <code>@import<\/code> t\u00e9l\u00e9charge les fichiers en s\u00e9rie.<\/p>\n<\/aside>\n\n<p>Plus g\u00e9n\u00e9ralement, vous appliquerez media query dans les feuilles de style en utilisant un bloc at-rule CSS @media qui modifie des styles sp\u00e9cifiques. Par exemple :<\/p>\n<pre><code class=\"language-css\">\/* default styles *\/\nmain {\n  width: 400px;\n}\n\n\/* styles applied when screen has a width of at least 800px *\/\n@media screen and (min-width: 800px) {\n  main {\n    width: 760px;\n  }\n}<\/code><\/pre>\n<p>Les d\u00e9veloppeurs peuvent appliquer toutes les r\u00e8gles de media query n\u00e9cessaires pour adapter la mise en page d&rsquo;un site.<\/p>\n<h2>Meilleures pratiques pour media query<\/h2>\n<p>Lorsque les media queries ont \u00e9t\u00e9 con\u00e7ues pour la premi\u00e8re fois, de nombreux sites ont opt\u00e9 pour un ensemble de mises en page rigoureusement fixes. C&rsquo;est conceptuellement plus facile \u00e0 concevoir et \u00e0 coder car cela reproduit efficacement un ensemble limit\u00e9 de mod\u00e8les de pages. Par exemple :<\/p>\n<ol>\n<li>Les largeurs d&rsquo;\u00e9cran inf\u00e9rieures \u00e0 600px utilisent une mise en page de type mobile de 400px de large.<\/li>\n<li>Les largeurs d&rsquo;\u00e9cran comprises entre 600px et 999px utilisent une mise en page de type tablette de 600px de large.<\/li>\n<li>Les largeurs d&rsquo;\u00e9cran sup\u00e9rieures \u00e0 1 000px utilisent une mise en page de type ordinateur de bureau de 1000px de large.<\/li>\n<\/ol>\n<p>Cette technique est imparfaite. Les r\u00e9sultats sur les tr\u00e8s petits et tr\u00e8s grands \u00e9crans peuvent para\u00eetre m\u00e9diocres, et une maintenance CSS peut \u00eatre n\u00e9cessaire lorsque les appareils et les tailles d&rsquo;\u00e9cran changent au fil du temps.<\/p>\n<p>Une meilleure option consiste \u00e0 utiliser un design fluide <a href=\"https:\/\/kinsta.com\/fr\/blog\/index-google-mobile-first\/\">mobile-first<\/a> avec des points de terminaison qui adaptent la mise en page \u00e0 certaines tailles. En substance, la mise en page par d\u00e9faut utilise les styles les plus simples pour les petits \u00e9crans qui positionnent les \u00e9l\u00e9ments dans des blocs verticaux lin\u00e9aires.<\/p>\n<p>Par exemple, <code>&lt;article&gt;<\/code> et <code>&lt;aside&gt;<\/code> \u00e0 l&rsquo;int\u00e9rieur d&rsquo;un conteneur <code>&lt;main&gt;<\/code> :<\/p>\n<pre><code class=\"language-css\">\/* default small-screen device *\/\nmain {\n  width: 100%;\n}\n\narticle, aside {\n  width: 100%;\n  padding: 2em;\n}<\/code><\/pre>\n<p>Voici le r\u00e9sultat dans tous les navigateurs &#8211; m\u00eame les tr\u00e8s anciens qui ne prennent pas en charge les media queries :<\/p>\n<figure style=\"width: 626px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/site-linear-example.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/site-linear-example.png\" alt=\"Exemple de capture d'\u00e9cran sans prise en charge des media queries.\" width=\"626\" height=\"200\"><\/a><figcaption class=\"wp-caption-text\">Exemple de capture d&rsquo;\u00e9cran sans prise en charge des media queries.<\/figcaption><\/figure>\n<p>Lorsque les media queries sont prises en charge et que l&rsquo;\u00e9cran d\u00e9passe une largeur sp\u00e9cifique, disons 500px, la fonction <code>&lt;article&gt;<\/code> et <code>&lt;aside&gt;<\/code> <span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">peuvent \u00eatre positionn\u00e9s horizontalement. Cet exemple utilise une <\/span><a style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/grid\" target=\"_blank\" rel=\"noopener noreferrer\">grille CSS<\/a><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">, o\u00f9 le contenu principal utilise environ deux tiers de la largeur, et le contenu secondaire utilise le tiers restant :<\/span><\/p>\n<article>\n<pre><code class=\"language-css\">\/* larger device *\/\n@media (min-width : 500px) {\n  main {\n    display : grid ;\n    grid-template-columns : 2fr 1fr ;\n    gap : 2em ;\n  }\n\n  article, aside {\n    width : auto ;\n    padding : 0 ;\n  }\n}<\/code><\/pre>\n<p>Voici le r\u00e9sultat sur des \u00e9crans plus grands :<\/p>\n<figure style=\"width: 602px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/site-horizontal.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/site-horizontal.png\" alt=\"Exemple de capture d'\u00e9cran avec prise en charge de media query.\" width=\"602\" height=\"112\"><\/a><figcaption class=\"wp-caption-text\">Exemple de capture d&rsquo;\u00e9cran avec prise en charge de media query.<\/figcaption><\/figure>\n<h2>Alternatives \u00e0 media Query<\/h2>\n<p>Les conceptions responsives peuvent \u00e9galement \u00eatre mises en \u0153uvre dans les CSS modernes \u00e0 l&rsquo;aide de propri\u00e9t\u00e9s plus r\u00e9centes qui adaptent intrins\u00e8quement la mise en page sans examiner les dimensions du viewport. Les options comprennent :<\/p>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li><code>calc<\/code>, <code>min-width<\/code>, <code>max-width<\/code>, <code>min-height<\/code>, <code>max-height<\/code>, et la propri\u00e9t\u00e9 plus r\u00e9cente <code>clamp<\/code> peuvent toutes d\u00e9finir des dimensions qui dimensionnent les \u00e9l\u00e9ments en fonction de limites connues et de l&rsquo;espace disponible.<\/li>\n<li>Les unit\u00e9s viewport <code>vw<\/code>, <code>vh<\/code>, <code>vmin<\/code>, et <code>vmax<\/code> peuvent dimensionner les \u00e9l\u00e9ments en fonction des fractions de la dimension de l&rsquo;\u00e9cran.<\/li>\n<li>Le texte peut \u00eatre affich\u00e9 dans des colonnes CSS qui apparaissent ou disparaissent selon l&rsquo;espace disponible.<\/li>\n<li>Les \u00e9l\u00e9ments peuvent \u00eatre dimensionn\u00e9s en fonction des tailles de leurs \u00e9l\u00e9ments enfants \u00e0 l&rsquo;aide des dimensions <code>min-content<\/code>, <code>fit-content<\/code>, et <code>max-content<\/code>.<\/li>\n<li>CSS flexbox peut envelopper &#8211; ou <em>ne pas <\/em>envelopper &#8211; les \u00e9l\u00e9ments lorsqu&rsquo;ils commencent \u00e0 d\u00e9passer l&rsquo;espace disponible.<\/li>\n<li>Les \u00e9l\u00e9ments de la grille CSS peuvent \u00eatre dimensionn\u00e9s avec des unit\u00e9s de fraction <code>fr<\/code> proportionnelles. La fonction CSS repeat peut \u00eatre utilis\u00e9e conjointement avec <code>minmax<\/code>, <code>auto-fit<\/code>, et <code>auto-fill<\/code> pour allouer l&rsquo;espace disponible.<\/li>\n<li>Les nouvelles <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/CSS_Container_Queries\" target=\"_blank\" rel=\"noopener noreferrer\">requ\u00eates de conteneur CSS<\/a> \u00a0(actuellement) exp\u00e9rimentales peuvent r\u00e9agir \u00e0 l&rsquo;espace partiel disponible pour un composant dans une mise en page.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Ces options d\u00e9passent le cadre de cet article, mais elles sont souvent plus pratiques que les media queries plus grossi\u00e8res, qui ne peuvent r\u00e9pondre qu&rsquo;aux dimensions de l&rsquo;\u00e9cran. Si vous pouvez r\u00e9aliser une mise en page sans media queries, elle utilisera probablement moins de code, sera plus efficace et n\u00e9cessitera moins de maintenance au fil du temps.<\/p>\n<p>Cela dit, il existe des situations o\u00f9 les media queries restent la seule option de mise en page viable. Elles restent essentielles lorsque vous devez prendre en compte d&rsquo;autres facteurs d&rsquo;\u00e9cran tels que les ratios d&rsquo;aspect, l&rsquo;orientation de l&rsquo;appareil, la profondeur des couleurs, la pr\u00e9cision du pointeur ou les pr\u00e9f\u00e9rences de l&rsquo;utilisateur telles que la r\u00e9duction des animations et le mode clair\/sombre.<\/p>\n<h2>Avez-vous besoin de media queries dans JavaScript ?<\/h2>\n<p>Jusqu&rsquo;\u00e0 pr\u00e9sent, nous avons surtout parl\u00e9 de CSS. C&rsquo;est parce que la plupart des probl\u00e8mes de mise en page peuvent &#8211; et<em> devraient<\/em> &#8211; \u00eatre r\u00e9solus uniquement avec CSS.<\/p>\n<p>Cependant, il y a des situations o\u00f9 il est pratique d&rsquo;utiliser une media query dans JavaScript au lieu de CSS, comme dans les cas suivants :<\/p>\n<ul>\n<li>Un composant, comme un menu, a des fonctionnalit\u00e9s diff\u00e9rentes sur les petits et les grands \u00e9crans.<\/li>\n<li>Le passage du portrait au paysage et vice-versa affecte la fonctionnalit\u00e9 d&rsquo;une application web.<\/li>\n<li>Un jeu tactile doit modifier la disposition de <code>&lt;canvas&gt;<\/code>ou adapter les boutons de contr\u00f4le.<\/li>\n<li>Une appli web adh\u00e8re aux pr\u00e9f\u00e9rences des utilisateurs, comme le mode sombre\/clair, l&rsquo;animation r\u00e9duite, la grossi\u00e8ret\u00e9 du toucher, etc.<\/li>\n<\/ul>\n<p>Les sections suivantes pr\u00e9sentent trois m\u00e9thodes qui utilisent des media queries &#8211; ou des options similaires aux media queries &#8211; dans <a href=\"https:\/\/kinsta.com\/fr\/blog\/vue-js\/\">JavaScript<\/a>. Tous les exemples renvoient une cha\u00eene d&rsquo;\u00e9tat o\u00f9 :<\/p>\n<ul>\n<li>Vue <strong>small<\/strong> = un \u00e9cran dont la largeur est inf\u00e9rieure \u00e0 400 pixels ;<\/li>\n<li>Vue<strong> medium<\/strong> = un \u00e9cran dont la largeur est comprise entre 400 et 799 pixels ; et<\/li>\n<li>Vue <strong>large<\/strong> = un \u00e9cran d&rsquo;une largeur de 800 pixels ou plus.<\/li>\n<\/ul>\n<h2>Option 1 : Surveiller les dimensions de la fen\u00eatre d&rsquo;affichage<\/h2>\n<p>C&rsquo;\u00e9tait la seule option \u00e0 l&rsquo;\u00e9poque sombre qui a pr\u00e9c\u00e9d\u00e9 la mise en \u0153uvre des media queries. JavaScript \u00e9coutait les \u00e9v\u00e9nements de \u00ab redimensionnement \u00bb du navigateur, analysait les dimensions de la fen\u00eatre d&rsquo;affichage \u00e0 l&rsquo;aide de <code>window.innerWidth<\/code> et <code>window.innerHeight<\/code> (ou <code>document.body.clientWidth<\/code> et <code>document.body.clientHeight<\/code> dans les anciens IE), et r\u00e9agissait en cons\u00e9quence.<\/p>\n<p>Ce code envoie la cha\u00eene calcul\u00e9e <strong>small<\/strong>, <strong>medium<\/strong> ou <strong>large<\/strong> \u00e0 la console :<\/p>\n<pre><code class=\"language-js\">const\n  screen = {\n    small : 0,\n    medium : 400,\n    large : 800\n  } ;\n\n\/\/ observe window resize\nwindow.addEventListener('resize', resizeHandler) ;\n\n\/\/ initial call\nresizeHandler() ;\n\n\/\/ calculate size\nfunction resizeHandler() {\n\n  \/\/ get window width\n  const iw = window.innerWidth ;\n \n  \/\/ determine named size\n  let size = null ;\n  for (let s in screen) {\n    if (iw &gt;= screen[s]) size = s ;\n  }\n\n  console.log(size) ;\n}<\/code><\/pre>\n<p>Vous pouvez voir une <a href=\"https:\/\/codepen.io\/craigbuckler\/full\/mdmBymR\" target=\"_blank\" rel=\"noopener noreferrer\">d\u00e9monstration fonctionnelle ici<\/a>. (Si vous utilisez un navigateur de bureau, ouvrez ce lien dans une nouvelle fen\u00eatre pour faciliter le redimensionnement. Les utilisateurs de mobiles peuvent faire pivoter l&rsquo;appareil)<\/p>\n<p>L&rsquo;exemple ci-dessus examine la taille de la fen\u00eatre d&rsquo;affichage lorsque le navigateur est redimensionn\u00e9, d\u00e9termine si elle est petite, moyenne ou grande et la d\u00e9finit comme une classe sur l&rsquo;\u00e9l\u00e9ment body, ce qui modifie la couleur d&rsquo;arri\u00e8re-plan.<\/p>\n<p>Les avantages de cette m\u00e9thode sont les suivants :<\/p>\n<ul>\n<li>Elle fonctionne dans tous les <a href=\"https:\/\/kinsta.com\/fr\/parts-de-marche-des-navigateurs\/\">navigateurs<\/a> qui peuvent ex\u00e9cuter JavaScript, m\u00eame les anciennes applications.<\/li>\n<li>Vous saisissez les dimensions exactes et vous pouvez r\u00e9agir en cons\u00e9quence.<\/li>\n<\/ul>\n<p>Les inconv\u00e9nients :<\/p>\n<ul>\n<li>C&rsquo;est une vieille technique qui n\u00e9cessite beaucoup de code.<\/li>\n<li>Est-ce trop exact ? Avez-vous vraiment besoin de savoir quand la largeur est de 966px par rapport \u00e0 967px ?<\/li>\n<li>Vous devrez peut-\u00eatre faire correspondre manuellement les dimensions \u00e0 une media query CSS correspondante.<\/li>\n<li>Les utilisateurs peuvent redimensionner rapidement le navigateur, ce qui oblige la fonction de gestion \u00e0 s&rsquo;ex\u00e9cuter \u00e0 nouveau \u00e0 chaque fois. Cela peut surcharger les navigateurs plus anciens et plus lents en \u00e9tranglant l&rsquo;\u00e9v\u00e9nement. Il ne peut \u00eatre d\u00e9clench\u00e9 qu&rsquo;une fois toutes les 500 millisecondes.<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none\"><\/li>\n<\/ul>\n<p>En r\u00e9sum\u00e9, ne surveillez pas les dimensions de la fen\u00eatre d&rsquo;affichage, sauf si vous avez des exigences de dimensionnement tr\u00e8s sp\u00e9cifiques et complexes.<\/p>\n<h2 id=\"option2\">Option 2 : D\u00e9finir et surveiller une propri\u00e9t\u00e9 personnalis\u00e9e CSS (variable)<\/h2>\n<p>Il s&rsquo;agit d&rsquo;une technique l\u00e9g\u00e8rement inhabituelle qui modifie la valeur d&rsquo;une cha\u00eene de propri\u00e9t\u00e9 personnalis\u00e9e en CSS lorsqu&rsquo;une media query est d\u00e9clench\u00e9e. Les propri\u00e9t\u00e9s personnalis\u00e9es sont <a href=\"https:\/\/kinsta.com\/fr\/blog\/navigateur-le-plus-sur\/\">prises en charge par tous les navigateurs modernes<\/a> (mais pas par IE).<\/p>\n<p>Dans l&rsquo;exemple ci-dessous,\u00a0<code>--screen custom property<\/code> est d\u00e9finie sur \u00ab small \u00bb, \u00ab medium \u00bb ou \u00ab large \u00bb dans un bloc de code @media :<\/p>\n<pre><code class=\"language-css\">body {\n  --screen : \"small\";\n  background-color : #cff;\n  text-align : center;\n}\n\n@media (min-width : 400px) {\n \n  body {\n    --screen : \"medium\";\n    background-color : #fcf;\n \n}\n\n@media (min-width : 800px) {\n \n  body {\n    --screen : \"large\";\n    background-color : #ffc;\n  }\n \n}<\/code><\/pre>\n<p>La valeur peut \u00eatre sortie dans le CSS seul \u00e0 l&rsquo;aide d&rsquo;un pseudo-\u00e9l\u00e9ment (mais notez qu&rsquo;elle doit \u00eatre contenue entre des guillemets simples ou doubles) :<\/p>\n<pre><code class=\"language-css\">p::before {\n  content : var(--screen);\n}<\/code><\/pre>\n<p>Vous pouvez r\u00e9cup\u00e9rer la valeur de la propri\u00e9t\u00e9 personnalis\u00e9e en utilisant JavaScript :<\/p>\n<pre><code class=\"language-js\">const screen = getComputedStyle(window.body)\n                 .getPropertyValue('--screen');<\/code><\/pre>\n<p>Mais ce n&rsquo;est pas tout \u00e0 fait \u00e7a, car la valeur renvoy\u00e9e contient tous les espaces et caract\u00e8res de citation d\u00e9finis apr\u00e8s les deux points dans le CSS. La cha\u00eene de caract\u00e8res sera \u00ab large \u00bb, donc un petit toilettage est n\u00e9cessaire :<\/p>\n<pre><code class=\"language-js\">\/\/ returns small, medium, or large in a string\nconst screen = getComputedStyle(window.body)\n                 .getPropertyValue('--screen')\n                 .replace(\/\\W\/g, '');<\/code><\/pre>\n<p>Vous pouvez voir une <a href=\"https:\/\/codepen.io\/craigbuckler\/full\/BaRwNzG\" target=\"_blank\" rel=\"noopener noreferrer\">d\u00e9monstration fonctionnelle ici<\/a>. (Si vous utilisez un navigateur de bureau, ouvrez ce lien dans une nouvelle fen\u00eatre pour faciliter le redimensionnement. Les utilisateurs de mobiles peuvent faire pivoter l&rsquo;appareil)<\/p>\n<p>L&rsquo;exemple examine la valeur CSS toutes les deux secondes. Cela n\u00e9cessite un peu de code JavaScript, mais il est n\u00e9cessaire de sonder les changements &#8211; vous ne pouvez pas d\u00e9tecter automatiquement que la valeur de la propri\u00e9t\u00e9 personnalis\u00e9e a chang\u00e9 en utilisant CSS.<\/p>\n<p>Il n&rsquo;est pas non plus possible d&rsquo;\u00e9crire la valeur dans un pseudo-\u00e9l\u00e9ment et de d\u00e9tecter le changement \u00e0 l&rsquo;aide d&rsquo;un <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/MutationObserver\" target=\"_blank\" rel=\"noopener noreferrer\">DOM Mutation Observer<\/a>. Les pseudo-\u00e9l\u00e9ments ne sont pas une \u00ab vraie \u00bb partie du DOM !<\/p>\n<p>Les avantages :<\/p>\n<ul>\n<li>Il s&rsquo;agit d&rsquo;une technique simple qui utilise principalement le CSS et correspond aux v\u00e9ritables media queries.<\/li>\n<li>Toutes les autres propri\u00e9t\u00e9s CSS peuvent \u00eatre modifi\u00e9es en m\u00eame temps.<\/li>\n<li>Il n&rsquo;y a pas besoin de dupliquer ou d&rsquo;analyser les cha\u00eenes media query JavaScript.<\/li>\n<\/ul>\n<p>Le principal inconv\u00e9nient est que vous ne pouvez pas r\u00e9agir automatiquement \u00e0 un changement de dimension de la fen\u00eatre d&rsquo;affichageu du navigateur. Si l&rsquo;utilisateur fait pivoter son t\u00e9l\u00e9phone de l&rsquo;orientation portrait \u00e0 l&rsquo;orientation paysage, le JavaScript ne le saura jamais. Vous pouvez interroger fr\u00e9quemment les changements, mais c&rsquo;est inefficace et cela entra\u00eene le d\u00e9calage que vous voyez dans notre d\u00e9monstration.<\/p>\n<p>La surveillance des propri\u00e9t\u00e9s personnalis\u00e9es CSS est une technique novatrice, mais elle n&rsquo;est pratique que lorsque :<\/p>\n<ol>\n<li>La mise en page peut \u00eatre fix\u00e9e au moment o\u00f9 une page est initialement rendue. Un kiosque ou un <a href=\"https:\/\/kinsta.com\/fr\/blog\/stripe-vs-square\/\">terminal de point de vente<\/a> est une possibilit\u00e9, mais ceux-ci ont probablement des r\u00e9solutions fixes et une seule mise en page, donc les media queries JavaScript ne sont pas pertinentes.<\/li>\n<li>Le site ou l&rsquo;application ex\u00e9cute d\u00e9j\u00e0 des fonctions fr\u00e9quentes bas\u00e9es sur le temps, comme l&rsquo;animation d&rsquo;un jeu. La propri\u00e9t\u00e9 personnalis\u00e9e pourrait \u00eatre v\u00e9rifi\u00e9e en m\u00eame temps pour d\u00e9terminer si des changements de mise en page sont n\u00e9cessaires.<\/li>\n<\/ol>\n<h2>Option 3 : Utiliser l&rsquo;API matchMedia<\/h2>\n<p><a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Window\/matchMedia\">L&rsquo;API matchMedia<\/a> est l\u00e9g\u00e8rement inhabituelle mais elle vous permet d&rsquo;impl\u00e9menter une media query JavaScript. Elle est <a href=\"https:\/\/caniuse.com\/matchmedia\" target=\"_blank\" rel=\"noopener noreferrer\">prise en charge par la plupart des navigateurs<\/a> \u00e0 partir d&rsquo;IE10. Le constructeur renvoie un <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/MediaQueryList\" target=\"_blank\" rel=\"noopener noreferrer\">objet MediaQueryList<\/a> dont la propri\u00e9t\u00e9 matches est \u00e9valu\u00e9e \u00e0 true ou false pour sa media query sp\u00e9cifique.<\/p>\n<p>Le code suivant affiche true lorsque la largeur de la fen\u00eatre du navigateur est de 800px ou plus :<\/p>\n<pre><code class=\"language-js\">const mqLarge = window.matchMedia( '(min-width : 800px)' );\nconsole.log( mqLarge.matches );<\/code><\/pre>\n<p>Un \u00e9v\u00e9nement \u00ab change \u00bb peut \u00eatre appliqu\u00e9 \u00e0 l&rsquo;objet MediaQueryList. Il est d\u00e9clench\u00e9 chaque fois que l&rsquo;\u00e9tat de la propri\u00e9t\u00e9 matches change : Elle devient true (plus de 800px) apr\u00e8s avoir \u00e9t\u00e9 pr\u00e9c\u00e9demment false (moins de 800px) ou vice versa.<\/p>\n<p>La fonction du gestionnaire de r\u00e9ception re\u00e7oit l&rsquo;objet MediaQueryList comme premier param\u00e8tre :<\/p>\n<pre><code class=\"language-js\">const mqLarge = window.matchMedia( '(min-width : 800px)' );\nmqLarge.addEventListener('change', mqHandler);\n\n\/\/ media query handler function\nfunction mqHandler(e) {\n \n  console.log(\n    e.matches ? 'large' : 'not large'\n  );\n \n}<\/code><\/pre>\n<p>Le gestionnaire s&rsquo;ex\u00e9cute uniquement lorsque la propri\u00e9t\u00e9 matches change. Il ne s&rsquo;ex\u00e9cutera pas lorsque la page est initialement charg\u00e9e, vous pouvez donc appeler la fonction directement pour d\u00e9terminer l&rsquo;\u00e9tat initial :<\/p>\n<pre><code class=\"language-js\">\/\/ initial state\nmqHandler(mqLarge);<\/code><\/pre>\n<p><a href=\"https:\/\/kinsta.com\/fr\/blog\/api-http-wordpress-partie-2\/\">L&rsquo;API<\/a> fonctionne bien lorsque vous vous d\u00e9placez entre deux \u00e9tats distincts. Pour analyser trois \u00e9tats ou plus, comme <strong>small<\/strong>, <strong>medium<\/strong> et <strong>large<\/strong>, il faudra plus de code.<\/p>\n<p>Commencez par d\u00e9finir un objet d&rsquo;\u00e9tat d&rsquo;\u00e9cran avec des objets matchMedia associ\u00e9s :<\/p>\n<pre><code class=\"language-js\">const\n  screen = {\n    small : null,\n    medium : window.matchMedia( '(min-width : 400px)' ),\n    large : window.matchMedia( '(min-width : 800px)' )\n  };<\/code><\/pre>\n<p>Il n&rsquo;est pas n\u00e9cessaire de d\u00e9finir un objet matchMedia sur l&rsquo;\u00e9tat <strong>small <\/strong>car le gestionnaire d&rsquo;\u00e9v\u00e9nements medium se d\u00e9clenchera lors du passage de <strong>small <\/strong>\u00e0 <strong>medium<\/strong>.<\/p>\n<p>Des r\u00e9cepteurs d&rsquo;\u00e9v\u00e9nements peuvent ensuite \u00eatre d\u00e9finis pour les \u00e9v\u00e9nements <strong>medium <\/strong>et <strong>large <\/strong>. Ceux-ci appellent la m\u00eame fonction de gestionnaire mqHandler() :<\/p>\n<pre><code class=\"language-js\">\/\/ media query change events\nfor (let [scr, mq] of Object.entries(screen)) {\n  if (mq) mq.addEventListener('change', mqHandler);\n}<\/code><\/pre>\n<p>La fonction du gestionnaire doit v\u00e9rifier tous les objets MediaQueryList pour d\u00e9terminer si <strong>small<\/strong>,<strong> medium<\/strong> ou <strong>large <\/strong>est actuellement actif. Les correspondances doivent \u00eatre effectu\u00e9es dans l&rsquo;ordre des tailles car une largeur de 999px correspondrait \u00e0 la fois \u00e0 <strong>medium<\/strong> et \u00e0 <strong>large<\/strong> &#8211; seul le plus grand doit \u00ab gagner \u00bb :<\/p>\n<pre><code class=\"language-js\">\/\/ media query handler function\nfunction mqHandler() {\n \n  let size = null;\n  for (let [scr, mq] of Object.entries(screen)) {\n    if (!mq || mq.matches) size = scr;\n  }\n \n  console.log(size);\n \n}<\/code><\/pre>\n<p>Vous pouvez voir une <a href=\"https:\/\/codepen.io\/craigbuckler\/full\/VwbMroZ\" target=\"_blank\" rel=\"noopener noreferrer\">d\u00e9monstration fonctionnelle ici<\/a>. (Si vous utilisez un navigateur de bureau, ouvrez ce lien dans une nouvelle fen\u00eatre pour faciliter le redimensionnement. Les utilisateurs de mobiles peuvent faire pivoter l&rsquo;appareil)<\/p>\n<p>Les exemples d&rsquo;utilisation sont les suivants :<\/p>\n<ol>\n<li>Des media queries dans du CSS pour d\u00e9finir et afficher une propri\u00e9t\u00e9 personnalis\u00e9e (comme indiqu\u00e9 dans l&rsquo;<strong>option 2 <\/strong>ci-dessus).<\/li>\n<li>Des media queries identiques dans les objets matchMedia pour surveiller les changements de dimension en JavaScript. La sortie JavaScript changera exactement au m\u00eame moment.<\/li>\n<\/ol>\n<p>Les principaux avantages de l&rsquo;utilisation de l&rsquo;API matchMedia sont les suivants :<\/p>\n<ul>\n<li>Elle est pilot\u00e9e par les \u00e9v\u00e9nements et efficace pour traiter les changements de media query.<\/li>\n<li>Elle utilise des cha\u00eenes de media queries identiques \u00e0 celles du CSS.<\/li>\n<\/ul>\n<p>Les inconv\u00e9nients :<\/p>\n<ul>\n<li>La gestion de deux ou plusieurs media queries n\u00e9cessite plus de r\u00e9flexion et de logique de code.<\/li>\n<li>Vous devez probablement dupliquer les cha\u00eenes de media query dans le code CSS et JavaScript. Cela peut entra\u00eener des erreurs si vous ne les gardez pas synchronis\u00e9es.<\/li>\n<\/ul>\n<p>Pour \u00e9viter les incompatibilit\u00e9s de media query, vous pouvez envisager d&rsquo;utiliser des jetons de conception dans votre syst\u00e8me de construction. Les cha\u00eenes de media queries sont d\u00e9finies dans un fichier JSON (ou similaire) et les valeurs sont ins\u00e9r\u00e9es dans le code CSS et JavaScript au moment de la cr\u00e9ation.<\/p>\n<p>En r\u00e9sum\u00e9, l&rsquo;API matchMedia est probablement le moyen le plus efficace et le plus pratique de mettre en \u0153uvre une media query JavaScript. Elle comporte quelques bizarreries, mais c&rsquo;est la meilleure option dans la plupart des situations.<\/p>\n\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Les options de dimensionnement CSS intrins\u00e8ques sont de plus en plus viables, mais les media queries restent la base du <a href=\"https:\/\/kinsta.com\/fr\/blog\/design-web-responsive\/\">responsive web design<\/a> pour la plupart des sites. Elles seront toujours n\u00e9cessaires pour g\u00e9rer les mises en page plus complexes et les pr\u00e9f\u00e9rences des utilisateurs, comme le mode clair\/sombre.<\/p>\n<p>Essayez de garder les media queries uniquement en CSS lorsque c&rsquo;est possible. Lorsque vous n&rsquo;avez pas d&rsquo;autre choix que de vous aventurer dans le royaume de JavaScript, l&rsquo;API matchMedia fournit un contr\u00f4le suppl\u00e9mentaire pour les composants de media query JavaScript, qui n\u00e9cessitent une fonctionnalit\u00e9 suppl\u00e9mentaire bas\u00e9e sur les dimensions.<\/p>\n<p>Vous avez d&rsquo;autres conseils pour mettre en \u0153uvre une media query JavaScript ? Partagez-les dans la section des commentaires !<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>La plupart des sites web modernes utilisent des techniques de conception web responsive pour s&rsquo;assurer qu&rsquo;ils sont beaux, lisibles et utilisables sur des appareils de toute &#8230;<\/p>\n","protected":false},"author":188,"featured_media":48574,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[535,468],"topic":[1013,980],"class_list":["post-48566","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-javascript","tag-javascript-frameworks","topic-experience-utilisateur","topic-tutoriel-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Un guide complet de l&#039;utilisation des media queries dans JavaScript<\/title>\n<meta name=\"description\" content=\"Les media queries sont normalement d\u00e9finies dans le CSS pour rendre la mise en page d&#039;un site responsive. Les media queries peuvent \u00e9galement \u00eatre utilis\u00e9es dans JavaScript.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/media-query-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Un guide complet pour utiliser media query dans JavaScript\" \/>\n<meta property=\"og:description\" content=\"Les media queries sont normalement d\u00e9finies dans le CSS pour rendre la mise en page d&#039;un site responsive. Les media queries peuvent \u00e9galement \u00eatre utilis\u00e9es dans JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/media-query-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-23T08:56:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-22T10:47:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/09\/javascript-media-query.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Craig Buckler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Les media queries sont normalement d\u00e9finies dans le CSS pour rendre la mise en page d&#039;un site responsive. Les media queries peuvent \u00e9galement \u00eatre utilis\u00e9es dans JavaScript.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/09\/javascript-media-query.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@craigbuckler\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Craig Buckler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/media-query-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/media-query-javascript\/\"},\"author\":{\"name\":\"Craig Buckler\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/715d986404b06691ab3014e06596908e\"},\"headline\":\"Un guide complet pour utiliser media query dans JavaScript\",\"datePublished\":\"2021-09-23T08:56:27+00:00\",\"dateModified\":\"2023-08-22T10:47:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/media-query-javascript\/\"},\"wordCount\":3488,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/media-query-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/09\/javascript-media-query.jpeg\",\"keywords\":[\"JavaScript\",\"JavaScript Frameworks\"],\"articleSection\":[\"D\u00e9veloppement web\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/media-query-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/media-query-javascript\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/media-query-javascript\/\",\"name\":\"Un guide complet de l'utilisation des media queries dans JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/media-query-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/media-query-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/09\/javascript-media-query.jpeg\",\"datePublished\":\"2021-09-23T08:56:27+00:00\",\"dateModified\":\"2023-08-22T10:47:56+00:00\",\"description\":\"Les media queries sont normalement d\u00e9finies dans le CSS pour rendre la mise en page d'un site responsive. Les media queries peuvent \u00e9galement \u00eatre utilis\u00e9es dans JavaScript.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/media-query-javascript\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/media-query-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/media-query-javascript\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/09\/javascript-media-query.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/09\/javascript-media-query.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"Un guide complet de l'utilisation des requ\u00eates multim\u00e9dia en JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/media-query-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutoriels JavaScript\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/tutoriel-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Un guide complet pour utiliser media query dans JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/715d986404b06691ab3014e06596908e\",\"name\":\"Craig Buckler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8e76011e66720bd2e3e24e164aa6f0b2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8e76011e66720bd2e3e24e164aa6f0b2?s=96&d=mm&r=g\",\"caption\":\"Craig Buckler\"},\"description\":\"Freelance UK web developer, writer, and speaker. Has been around a long time and rants about standards and performance.\",\"sameAs\":[\"https:\/\/craigbuckler.com\/\",\"https:\/\/www.linkedin.com\/in\/craigbuckler\",\"https:\/\/x.com\/craigbuckler\",\"https:\/\/www.youtube.com\/channel\/UCQwdl5oBTWGhifS6bRGADMQ\"],\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/craigbuckler\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Un guide complet de l'utilisation des media queries dans JavaScript","description":"Les media queries sont normalement d\u00e9finies dans le CSS pour rendre la mise en page d'un site responsive. Les media queries peuvent \u00e9galement \u00eatre utilis\u00e9es dans JavaScript.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/media-query-javascript\/","og_locale":"fr_FR","og_type":"article","og_title":"Un guide complet pour utiliser media query dans JavaScript","og_description":"Les media queries sont normalement d\u00e9finies dans le CSS pour rendre la mise en page d'un site responsive. Les media queries peuvent \u00e9galement \u00eatre utilis\u00e9es dans JavaScript.","og_url":"https:\/\/kinsta.com\/fr\/blog\/media-query-javascript\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2021-09-23T08:56:27+00:00","article_modified_time":"2023-08-22T10:47:56+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/09\/javascript-media-query.jpeg","type":"image\/jpeg"}],"author":"Craig Buckler","twitter_card":"summary_large_image","twitter_description":"Les media queries sont normalement d\u00e9finies dans le CSS pour rendre la mise en page d'un site responsive. Les media queries peuvent \u00e9galement \u00eatre utilis\u00e9es dans JavaScript.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/09\/javascript-media-query.jpeg","twitter_creator":"@craigbuckler","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Craig Buckler","Dur\u00e9e de lecture estim\u00e9e":"16 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/media-query-javascript\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/media-query-javascript\/"},"author":{"name":"Craig Buckler","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/715d986404b06691ab3014e06596908e"},"headline":"Un guide complet pour utiliser media query dans JavaScript","datePublished":"2021-09-23T08:56:27+00:00","dateModified":"2023-08-22T10:47:56+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/media-query-javascript\/"},"wordCount":3488,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/media-query-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/09\/javascript-media-query.jpeg","keywords":["JavaScript","JavaScript Frameworks"],"articleSection":["D\u00e9veloppement web"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/media-query-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/media-query-javascript\/","url":"https:\/\/kinsta.com\/fr\/blog\/media-query-javascript\/","name":"Un guide complet de l'utilisation des media queries dans JavaScript","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/media-query-javascript\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/media-query-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/09\/javascript-media-query.jpeg","datePublished":"2021-09-23T08:56:27+00:00","dateModified":"2023-08-22T10:47:56+00:00","description":"Les media queries sont normalement d\u00e9finies dans le CSS pour rendre la mise en page d'un site responsive. Les media queries peuvent \u00e9galement \u00eatre utilis\u00e9es dans JavaScript.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/media-query-javascript\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/media-query-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/media-query-javascript\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/09\/javascript-media-query.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/09\/javascript-media-query.jpeg","width":1460,"height":730,"caption":"Un guide complet de l'utilisation des requ\u00eates multim\u00e9dia en JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/media-query-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Tutoriels JavaScript","item":"https:\/\/kinsta.com\/fr\/sujets\/tutoriel-javascript\/"},{"@type":"ListItem","position":3,"name":"Un guide complet pour utiliser media query dans JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/715d986404b06691ab3014e06596908e","name":"Craig Buckler","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8e76011e66720bd2e3e24e164aa6f0b2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8e76011e66720bd2e3e24e164aa6f0b2?s=96&d=mm&r=g","caption":"Craig Buckler"},"description":"Freelance UK web developer, writer, and speaker. Has been around a long time and rants about standards and performance.","sameAs":["https:\/\/craigbuckler.com\/","https:\/\/www.linkedin.com\/in\/craigbuckler","https:\/\/x.com\/craigbuckler","https:\/\/www.youtube.com\/channel\/UCQwdl5oBTWGhifS6bRGADMQ"],"url":"https:\/\/kinsta.com\/fr\/blog\/author\/craigbuckler\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/48566","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/188"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=48566"}],"version-history":[{"count":12,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/48566\/revisions"}],"predecessor-version":[{"id":48622,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/48566\/revisions\/48622"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/48566\/translations\/en"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/48566\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/48566\/translations\/pt"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/48566\/translations\/de"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/48566\/translations\/fr"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/48566\/translations\/it"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/48566\/translations\/nl"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/48566\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/48574"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=48566"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=48566"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=48566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}