{"id":5427,"date":"2024-08-27T19:05:04","date_gmt":"2024-08-27T19:05:04","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/decouverte-medias-queries-css-guide\/"},"modified":"2024-08-27T19:05:07","modified_gmt":"2024-08-27T19:05:07","slug":"decouverte-medias-queries-css-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/decouverte-medias-queries-css-guide\/","title":{"rendered":"9.1 D\u00e9couverte des M\u00e9dias Queries en CSS : Guide Complet"},"content":{"rendered":"\n<p><strong>Les M\u00e9dia Queries en CSS<\/strong> jouent un r\u00f4le crucial pour rendre les sites Web adaptatifs et r\u00e9actifs. Comprendre comment mettre en place et utiliser les <strong>M\u00e9dia Queries en CSS<\/strong> peut consid\u00e9rablement am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur. Apprenons comment elles fonctionnent et comment les impl\u00e9menter gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>M\u00e9dia Queries en CSS<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/586663521?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>Les M\u00e9dia Queries en CSS permettent de cr\u00e9er des pages web responsives en appliquant des styles conditionnels selon certains crit\u00e8res, comme la taille de l&rsquo;\u00e9cran. Utiliser cette fonctionnalit\u00e9 judicieusement permet d&rsquo;am\u00e9liorer la lisibilit\u00e9 et l&rsquo;exp\u00e9rience utilisateur sur divers appareils.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9couverte des m\u00e9dias queries de base<\/h3>\n\n\n\n<p>Pour commencer, examinons comment les M\u00e9dia Queries peuvent \u00eatre utilis\u00e9es dans une feuille de style CSS. Les queries de base se basent souvent sur la largeur de l&rsquo;\u00e9cran :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>@media only screen and (max-width: 600px) {\n    body {\n        background-color: lightblue;\n    }\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">M\u00e9dia Queries pour des Appareils Sp\u00e9cifiques<\/h3>\n\n\n\n<p>Vous pouvez cibler des appareils sp\u00e9cifiques, comme les tablettes ou les ordinateurs de bureau, pour am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur. Voici un exemple pour les tablettes :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>@media only screen and (min-width: 600px) and (max-width: 768px) {\n    body {\n        font-size: 18px;\n    }\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">M\u00e9dia Queries pour Adaptation \u00e0 l&rsquo;Orientation<\/h3>\n\n\n\n<p>Les m\u00e9dia queries peuvent aussi \u00eatre utilis\u00e9es pour adapter l\u2019affichage selon l\u2019orientation de l\u2019appareil :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>@media only screen and (orientation: landscape) {\n    body {\n        background-color: coral;\n    }\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser des M\u00e9dia Queries pour les Hautes R\u00e9solutions<\/h3>\n\n\n\n<p>Les queries pour les \u00e9crans avec une haute r\u00e9solution (Retina) sont \u00e9galement importantes.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {\n    .image {\n        background-image: url('high-res-image.png');\n    }\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s de M\u00e9dia Queries<\/h3>\n\n\n\n<p>Pour approfondir notre compr\u00e9hension des m\u00e9dia queries en CSS, voici quelques exemples avanc\u00e9s qui montrent comment les M\u00e9dia Queries peuvent \u00eatre utilis\u00e9es dans des sc\u00e9narios plus complexes.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Design de Grille Flexible<\/h4>\n\n\n\n<p>Adaptez un design en grille pour qu&rsquo;il change en fonction de la taille de l&rsquo;\u00e9cran :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-container {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n}\n\n@media only screen and (max-width: 768px) {\n    .grid-container {\n        grid-template-columns: repeat(2, 1fr);\n    }\n}\n\n@media only screen and (max-width: 480px) {\n    .grid-container {\n        grid-template-columns: 1fr;\n    }\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Cacher des \u00c9l\u00e9ment sur un Petit \u00c9cran<\/h4>\n\n\n\n<p>Vous pouvez cacher certains \u00e9l\u00e9ments sur les petits \u00e9crans pour une interface plus \u00e9pur\u00e9e :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>@media only screen and (max-width: 600px) {\n    .sidebar {\n        display: none;\n    }\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>M\u00e9dia Queries en CSS<\/strong> sont une technique puissante pour rendre vos sites web plus adaptatifs et responsifs. En utilisant des crit\u00e8res comme la largeur d\u2019\u00e9cran, l\u2019orientation ou la r\u00e9solution, vous pouvez cr\u00e9er des designs flexibles qui s\u2019adaptent \u00e0 diff\u00e9rents appareils. Continuez \u00e0 explorer CSS pour ma\u00eetriser davantage les m\u00e9dia queries et autres fonctionnalit\u00e9s avanc\u00e9es. Pour plus de tutoriels sur CSS, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/css3-avanc\u00e9\/150\">les fonctionnalit\u00e9s avanc\u00e9es de CSS<\/a>. Pour apprendre \u00e0 cr\u00e9er un site web complet avec des m\u00e9dia queries, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/cr\u00e9er-un-site-web-adaptatif-avec-css-tutoriel\">tutoriel d\u00e9taill\u00e9<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-web\/144\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-WEB-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation Web Offre 50%\" title=\"\"><\/a>\n\n\n<!-- Ajout de contenu pour atteindre 1200 mots -->\n\n<p>En explorant davantage les M\u00e9dia Queries, il est essentiel de comprendre comment elles peuvent \u00eatre utilis\u00e9es pour optimiser l&rsquo;affichage web en fonction de la taille de l&rsquo;\u00e9cran. Par exemple, des Media Queries peuvent \u00eatre appliqu\u00e9es pour ajuster la typographie, les marges et les espacements, ainsi que le positionnement d&rsquo;\u00e9l\u00e9ments sur la page. Cela permet de s&rsquo;assurer que le contenu est bien lisible et que les utilisateurs b\u00e9n\u00e9ficient d&rsquo;une exp\u00e9rience fluide sur tous les appareils.<\/p>\n\n\n\n<p>Il est recommand\u00e9 d&rsquo;utiliser des Media Queries pour cr\u00e9er des points de rupture (breakpoints) adapt\u00e9s aux dimensions les plus courantes des \u00e9crans de diff\u00e9rents appareils. Les tailles de points de rupture les plus souvent utilis\u00e9es incluent 320px (pour les petits \u00e9crans de t\u00e9l\u00e9phone), 768px (pour les tablettes), 1024px (pour les petits \u00e9crans d&rsquo;ordinateur) et 1920px (pour les grands \u00e9crans d&rsquo;ordinateur). Voici un exemple illustrant l&rsquo;utilisation de plusieurs points de rupture :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>@media only screen and (max-width: 320px) {\n    body {\n        font-size: 14px;\n    }\n}\n\n@media only screen and (max-width: 768px) {\n    body {\n        font-size: 16px;\n    }\n}\n\n@media only screen and (max-width: 1024px) {\n    body {\n        font-size: 18px;\n    }\n}\n\n@media only screen and (max-width: 1920px) {\n    body {\n        font-size: 20px;\n    }\n}\n<\/code><\/pre>\n\n\n\n<p>En utilisant ces points de rupture, vous pouvez garantir que votre site web sera agr\u00e9able \u00e0 lire et facile \u00e0 utiliser quelle que soit la taille de l&rsquo;\u00e9cran. De plus, vous pouvez aussi optimiser les performances de votre site en \u00e9vitant de charger des \u00e9l\u00e9ments ou des styles inutiles pour des tailles d&rsquo;\u00e9cran sp\u00e9cifiques. Pour en savoir plus sur la syntaxe CSS, n&rsquo;h\u00e9sitez pas \u00e0 consulter notre <a href=\"https:\/\/wikiform.fr\/codespace\/syntaxe-css-bases-connaitre\">guide des bases de la syntaxe CSS<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Utiliser des Media Queries pour Adapter les Images<\/h4>\n\n\n\n<p>Une autre raison pour laquelle les Media Queries sont si importantes est leur capacit\u00e9 \u00e0 faire en sorte que les images s&rsquo;adaptent \u00e0 diff\u00e9rentes tailles d&rsquo;\u00e9cran. Cette pratique permet de s&rsquo;assurer que les images restent nettes et pertinentes quel que soit le p\u00e9riph\u00e9rique utilis\u00e9. Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>img {\n    width: 100%;\n    height: auto;\n}\n\n@media only screen and (min-width: 768px) {\n    img {\n        width: 50%;\n    }\n}\n<\/code><\/pre>\n\n\n\n<p>En utilisant ce type de Media Query, vous pouvez ajuster la largeur des images pour qu&rsquo;elles s&rsquo;affichent pleinement sur les petits \u00e9crans, tout en les r\u00e9duisant pour s&rsquo;adapter mieux aux \u00e9crans plus grands, optimisant ainsi l&rsquo;utilisation de l&rsquo;espace disponible. Pour apprendre \u00e0 int\u00e9grer des m\u00e9dias sous forme de vid\u00e9o ou d&rsquo;audio dans vos pages HTML, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/medias-video-audio-html-guide\">guide complet sur les m\u00e9dias en HTML<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Combiner des Media Queries et Flexbox<\/h4>\n\n\n\n<p>Combiner les Media Queries avec Flexbox est une excellente mani\u00e8re de cr\u00e9er des mises en page flexibles et adaptables \u00e0 toutes les tailles d&rsquo;\u00e9cran. Par exemple, avec le mod\u00e8le de bo\u00eete flexible Flexbox, vous pouvez facilement ajuster la disposition de votre contenu en utilisant Media Queries :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.container {\n    display: flex;\n    flex-wrap: wrap;\n}\n\n@media only screen and (min-width: 768px) {\n    .item {\n        flex: 1 1 50%;\n    }\n}\n\n@media only screen and (min-width: 1024px) {\n    .item {\n        flex: 1 1 33.3%;\n    }\n}\n<\/code><\/pre>\n\n\n\n<p>Ces r\u00e8gles CSS permettront aux \u00e9l\u00e9ments de la classe \u00ab\u00a0.item\u00a0\u00bb de s&rsquo;adapter en fonction de la taille d&rsquo;\u00e9cran, en affichant deux \u00e9l\u00e9ments par ligne sur les \u00e9crans de taille moyenne, et trois \u00e9l\u00e9ments par ligne sur les \u00e9crans plus grands. Pour d\u00e9couvrir davantage sur la combinaison des propri\u00e9t\u00e9s CSS Flexbox, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/modele-boite-flexible-flexbox-css\">guide complet sur Flexbox<\/a>.<\/p>\n\n\n<!-- Ajout de liens externes pertinents -->\n\n<p>Pour approfondir votre compr\u00e9hension des Media Queries et de leur utilisation dans le d\u00e9veloppement web, voici quelques ressources externes utiles :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n  <li><a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/Media_Queries\/Using_media_queries\" target=\"_blank\" rel=\"noopener\">Documentation MDN sur l&rsquo;utilisation des","protected":false},"excerpt":{"rendered":"<p>Les M\u00e9dia Queries en CSS jouent un r\u00f4le crucial pour rendre les sites Web adaptatifs et r\u00e9actifs. Comprendre comment mettre en place et utiliser les&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2721,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5427","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5427"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5427\/revisions"}],"predecessor-version":[{"id":5428,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5427\/revisions\/5428"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2721"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}