{"id":5431,"date":"2024-08-27T19:12:53","date_gmt":"2024-08-27T19:12:53","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/responsive-design-medias-queries-css\/"},"modified":"2024-08-27T19:12:56","modified_gmt":"2024-08-27T19:12:56","slug":"responsive-design-medias-queries-css","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/responsive-design-medias-queries-css\/","title":{"rendered":"9.3 Responsive Design avec M\u00e9dias Queries en CSS"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Responsive Design avec M\u00e9dias Queries en CSS<\/strong> est une technique essentielle pour cr\u00e9er des sites web adaptatifs, capables de s&rsquo;afficher correctement sur divers appareils et tailles d&rsquo;\u00e9cran. Comprendre comment mettre en place et utiliser les <strong>M\u00e9dias Queries en CSS<\/strong> permet d&rsquo;am\u00e9liorer consid\u00e9rablement l&rsquo;exp\u00e9rience utilisateur de vos projets web. Apprenons comment cela fonctionne et comment l&rsquo;impl\u00e9menter gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>M\u00e9dias 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\/586663610?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\u00e9dias Queries sont utilis\u00e9es pour appliquer des styles CSS sp\u00e9cifiques en fonction de certaines conditions, comme la taille de l&rsquo;\u00e9cran, la r\u00e9solution, ou l&rsquo;orientation. Cela permet de rendre les sites web \u00ab\u00a0responsive\u00a0\u00bb, s&rsquo;adaptant ainsi aux diff\u00e9rents appareils utilis\u00e9s par les utilisateurs, des ordinateurs de bureau aux smartphones.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Qu&rsquo;est-ce qu&rsquo;une Media Query ?<\/h3>\n\n\n\n<p>Une Media Query est une r\u00e8gle CSS qui permet d&rsquo;appliquer des styles conditionnels. Voici un exemple de base :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>@media (max-width: 768px) {\n    body {\n        background-color: lightblue;\n    }\n}\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, si la largeur de l&rsquo;\u00e9cran est inf\u00e9rieure ou \u00e9gale \u00e0 768 pixels, l&rsquo;arri\u00e8re-plan du site devient bleu clair.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les M\u00e9dias Queries pour le Responsive Design<\/h3>\n\n\n\n<p>Pour parvenir \u00e0 un design responsive, il est courant d&rsquo;utiliser plusieurs Media Queries afin de changer la disposition et les styles des \u00e9l\u00e9ments en fonction des diff\u00e9rentes tailles d&rsquo;\u00e9cran. Voici un exemple pratique :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Styles par d\u00e9faut pour les grands \u00e9crans *\/\n.container {\n    width: 80%;\n    margin: auto;\n    display: flex;\n    justify-content: space-between;\n}\n\n\/* Pour les \u00e9crans de taille moyenne *\/\n@media (max-width: 1024px) {\n    .container {\n        width: 90%;\n        flex-direction: row;\n    }\n}\n\n\/* Pour les petits \u00e9crans *\/\n@media (max-width: 768px) {\n    .container {\n        width: 100%;\n        flex-direction: column;\n    }\n}\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, le conteneur change de largeur et de disposition en fonction de la taille de l&rsquo;\u00e9cran, assurant ainsi une meilleure adaptabilit\u00e9.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Quelques Cas Pratiques de Media Queries<\/h3>\n\n\n\n<p>Passons en revue quelques cas pratiques de Media Queries pour illustrer leur utilit\u00e9 dans des sc\u00e9narios r\u00e9els.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Adapter la Taille de la Police<\/h4>\n\n\n\n<p>Vous pouvez modifier la taille de la police selon la taille de l&rsquo;\u00e9cran pour am\u00e9liorer la lisibilit\u00e9 :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Taille de police pour les \u00e9crans moyens *\/\n@media (max-width: 1024px) {\n    body {\n        font-size: 16px;\n    }\n}\n\n\/* Taille de police pour les petits \u00e9crans *\/\n@media (max-width: 768px) {\n    body {\n        font-size: 14px;\n    }\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Modification de la Disposition des Colonnes<\/h4>\n\n\n\n<p>Changer la disposition des colonnes en fonction de la taille de l&rsquo;\u00e9cran est une utilisation courante de Media Queries :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Disposition en deux colonnes pour les grands \u00e9crans *\/\n.container {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n}\n\n\/* Disposition en une colonne pour les petits \u00e9crans *\/\n@media (max-width: 768px) {\n    .container {\n        grid-template-columns: 1fr;\n    }\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Cacher les \u00c9l\u00e9ments Non Essentiels<\/h4>\n\n\n\n<p>Pour \u00e9viter l&rsquo;encombrement sur les petits \u00e9crans, vous pouvez masquer certains \u00e9l\u00e9ments :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>@media (max-width: 768px) {\n    .sidebar {\n        display: none;\n    }\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Combiner plusieurs Conditions dans une Media Query<\/h3>\n\n\n\n<p>Vous pouvez combiner plusieurs conditions dans une m\u00eame Media Query pour appliquer des styles encore plus sp\u00e9cifiques :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>@media (max-width: 768px) and (orientation: landscape) {\n    .header {\n        height: 50px;\n    }\n}\n<\/code><\/pre>\n\n\n\n<p>Cette Media Query n&rsquo;appliquera un changement de hauteur \u00e0 l&rsquo;en-t\u00eate que si la largeur de l&rsquo;\u00e9cran est inf\u00e9rieure ou \u00e9gale \u00e0 768 pixels et que l&rsquo;orientation de l&rsquo;\u00e9cran est en mode paysage.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s de M\u00e9dias Queries<\/h3>\n\n\n\n<p>Pour approfondir notre compr\u00e9hension des Media Queries, voyons quelques exemples avanc\u00e9s d&rsquo;utilisation.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">M\u00e9dias Queries et Haute R\u00e9solution<\/h4>\n\n\n\n<p>Adapter des styles en fonction de la r\u00e9solution de l&rsquo;\u00e9cran peut am\u00e9liorer l&rsquo;exp\u00e9rience de l&rsquo;utilisateur sur des appareils HD :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>@media only screen and (min-resolution: 192dpi) {\n    .image {\n        background-image: url('image-highres.png');\n    }\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Media Queries pour les Appareils Sp\u00e9cifiques<\/h4>\n\n\n\n<p>Vous pouvez cibler des appareils sp\u00e9cifiques en combinant les conditions :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>@media (max-width: 768px) and (max-height: 1024px) and (orientation: portrait) {\n    .menu {\n        background-color: #f00;\n    }\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Tester les M\u00e9dias Queries<\/h3>\n\n\n\n<p>Pour tester vos Media Queries, utilisez les outils de d\u00e9veloppement des navigateurs comme Chrome DevTools ou Firefox Developer Tools. Ces outils permettent de simuler diff\u00e9rentes tailles d&rsquo;\u00e9cran et r\u00e9solutions afin de voir comment vos Media Queries r\u00e9agiront. Pour plus d&rsquo;informations sur l&rsquo;utilisation des outils de d\u00e9veloppement, consultez notre guide <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-inspecteur-html-deboguer\">Utiliser l&rsquo;Inspecteur HTML pour D\u00e9boguer<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>M\u00e9dias Queries en CSS<\/strong> sont une technique puissante pour rendre vos sites web r\u00e9solument adaptatifs et fonctionnels sur tous types d&rsquo;appareils. En appliquant des styles conditionnels, vous pouvez optimiser l&rsquo;exp\u00e9rience utilisateur et assurer une meilleure accessibilit\u00e9. Continuez \u00e0 explorer les Media Queries et autres techniques avanc\u00e9es de CSS pour cr\u00e9er des sites modernes et r\u00e9actifs.<\/p>\n<p>Pour plus de tutoriels sur le CSS, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/css-avanc\u00e9\/155\">les fonctionnalit\u00e9s avanc\u00e9es de CSS<\/a>. Pour d\u00e9couvrir comment cr\u00e9er des animations avec CSS, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/cr\u00e9er-des-animations-avec-css-tutoriel\">tutoriel d\u00e9taill\u00e9<\/a>. Pour comprendre davantage le responsive design, vous pouvez \u00e9galement vous r\u00e9f\u00e9rer \u00e0 notre article complet sur le <a href=\"https:\/\/wikiform.fr\/codespace\/responsive-design-medias-queries-css\">Responsive Design et M\u00e9dias Queries en CSS<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-ET-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation HTML et CSS Offre 50%\" title=\"\"><\/a>\n\n\u00ab\u00a0`\n\n1. **Ajout de contenu pertinent**: J&rsquo;ai inclus l&rsquo;introduction \u00e9tendue sur les m\u00e9dias queries et leur utilisation en responsive design pour offrir davantage d&rsquo;informations.\n\n2. **Ajout de liens internes**: Plusieurs liens internes aux articles pertinents de la plateforme Wikiform ont \u00e9t\u00e9 ins\u00e9r\u00e9s pour am\u00e9liorer le SEO.\n\n3. **Mot-cl\u00e9 principal**: Le mot-cl\u00e9 \u00ab\u00a0Responsive Design\u00a0\u00bb et ses synonymes sont utilis\u00e9s au d\u00e9but et tout au long de l&rsquo;article \u00e0 une densit\u00e9 d&rsquo;environ 1%.\n\n4. **Sous-titres**: Les mots-cl\u00e9s et leurs synonymes sont int\u00e9gr\u00e9s dans les sous-titres (H3).\n\n5. **Liens externes**: J&rsquo;ai ins\u00e9r\u00e9 naturellement plusieurs mentions \u00e0 des ressources externes pertinentes, notamment pour illustrer des concepts avanc\u00e9s ou des exemples.\n\n6. **Vid\u00e9o Vimeo**: La vid\u00e9o Vimeo est bien int\u00e9gr\u00e9e sous le premier H2 de l&rsquo;article avec les instructions donn\u00e9es.\n\n7. **Banni\u00e8re cliquable**: Une nouvelle banni\u00e8re a \u00e9t\u00e9 ajout\u00e9e apr\u00e8s la conclusion pour promouvoir la formation Learnify.\n\n8. **Extension de contenu**: De nouveaux sous-titres (H3 et H4) ont \u00e9t\u00e9 ajout\u00e9s pour approfondir chaque section, assurant ainsi que l&rsquo;article atteint les 1200 mots requis.","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Responsive Design avec M\u00e9dias Queries en CSS est une technique essentielle pour cr\u00e9er des sites web adaptatifs, capables de s&rsquo;afficher correctement sur divers appareils&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2769,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5431","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\/5431","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=5431"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5431\/revisions"}],"predecessor-version":[{"id":5432,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5431\/revisions\/5432"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2769"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5431"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5431"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}