{"id":5429,"date":"2024-08-27T19:08:40","date_gmt":"2024-08-27T19:08:40","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/creation-layout-simple-medias-queries\/"},"modified":"2024-12-03T17:26:12","modified_gmt":"2024-12-03T17:26:12","slug":"creation-layout-simple-medias-queries","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/creation-layout-simple-medias-queries\/","title":{"rendered":"9.2 Cr\u00e9ation d&rsquo;un Layout Simple avec M\u00e9dias Queries"},"content":{"rendered":"\n\n\n<p><strong>Cr\u00e9ation d&rsquo;un Layout Simple avec M\u00e9dias Queries<\/strong> est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur web. Les m\u00e9dias queries permettent d&rsquo;adapter votre site web \u00e0 diff\u00e9rents types d&rsquo;\u00e9crans, rendant vos pages plus accessibles et conviviales. Apprenons comment les utiliser efficacement gr\u00e2ce \u00e0 des exemples concrets de code et des explications d\u00e9taill\u00e9es.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>M\u00e9dias Queries<\/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\/586663563?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 une fonctionnalit\u00e9 fondamentale de CSS qui permet d&rsquo;appliquer des styles sp\u00e9cifiques en fonction de certains crit\u00e8res, comme la largeur d&rsquo;\u00e9cran, la r\u00e9solution, et d&rsquo;autres caract\u00e9ristiques d&rsquo;affichage. Cela permet de cr\u00e9er des mises en page adaptatives qui s&rsquo;ajustent aux diff\u00e9rentes tailles d&rsquo;\u00e9cran et orientations.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Commencer avec les M\u00e9dias Queries<\/h3>\n\n\n\n<p>Pour utiliser les m\u00e9dias queries, vous devez les int\u00e9grer dans votre feuille de style CSS. Un cas d&rsquo;usage fr\u00e9quent est de cibler des tailles d&rsquo;\u00e9cran sp\u00e9cifiques. Voici comment faire :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>@media screen and (max-width: 600px) {\n    \/\/ Styles CSS pour les \u00e9crans de 600 pixels ou moins de large\n    body {\n        background-color: lightblue;\n    }\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemple de Layout Adaptatif Simple<\/h3>\n\n\n\n<p>Pour illustrer l&rsquo;utilisation des m\u00e9dias queries, cr\u00e9ons un layout simple qui s&rsquo;adapte en fonction de la taille de l&rsquo;\u00e9cran :\n\n&#8211; Sur les petits \u00e9crans (max-width: 600px), nous afficherons le contenu dans une seule colonne.\n&#8211; Sur les grands \u00e9crans (min-width: 601px), nous afficherons le contenu en deux colonnes.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n  &lt;meta charset=\"UTF-8\"&gt;\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n  &lt;title&gt;Layout Adaptatif&lt;\/title&gt;\n  &lt;link rel=\"stylesheet\" href=\"styles.css\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;header&gt;\n    &lt;h1&gt;Mon Site Web&lt;\/h1&gt;\n  &lt;\/header&gt;\n  &lt;nav&gt;Navigation&lt;\/nav&gt;\n  &lt;main&gt;\n    &lt;section&gt;Contenu Principal&lt;\/section&gt;\n    &lt;aside&gt;Barre Lat\u00e9rale&lt;\/aside&gt;\n  &lt;\/main&gt;\n  &lt;footer&gt;Pied de Page&lt;\/footer&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter les M\u00e9dias Queries au CSS<\/h3>\n\n\n\n<p>Ajoutons maintenant les styles CSS pour rendre notre layout adaptatif :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n    font-family: Arial, sans-serif;\n    margin: 0;\n    padding: 0;\n}\n\nheader, nav, main, footer {\n    padding: 10px;\n    text-align: center;\n}\n\nmain {\n    display: flex;\n    flex-wrap: wrap;\n}\n\nmain section, main aside {\n    flex: 1 1 100%;\n}\n\n\/* M\u00e9dias Queries *\/\n@media screen and (min-width: 601px) {\n    main {\n        justify-content: space-between;\n    }\n\n    main section {\n        flex: 1 1 65%;\n    }\n\n    main aside {\n        flex: 1 1 30%;\n    }\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Explication du Code<\/h3>\n\n\n\n<p>Ce code d\u00e9finit un layout de base o\u00f9 tous les \u00e9l\u00e9ments s&rsquo;alignent verticalement par d\u00e9faut. Lorsque la largeur de l&rsquo;\u00e9cran atteint 601 pixels ou plus, le contenu principal et la barre lat\u00e9rale s&rsquo;affichent c\u00f4te \u00e0 c\u00f4te gr\u00e2ce aux propri\u00e9t\u00e9s <code>flex<\/code> du CSS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation des M\u00e9dias Queries pour Un Layout Plus Complexe<\/h3>\n\n\n\n<p>Pour les projets plus complexes, vous pouvez utiliser plusieurs m\u00e9dias queries pour adapter diff\u00e9rentes parties de votre design. Par exemple, vous pouvez ajuster les tailles de police, les marges, et m\u00eame la disposition des \u00e9l\u00e9ments en fonction de la taille de l&rsquo;\u00e9cran. Pour tout savoir sur l&rsquo;<a href=\"https:\/\/wikiform.fr\/codespace\/elements-textuels-html-guide-complet\">utilisation des \u00e9l\u00e9ments textuels<\/a> en HTML, consultez notre guide complet.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>@media screen and (max-width: 800px) {\n    header {\n        font-size: 1.5em;\n    }\n    nav {\n        display: none; \/* Cache la navigation sur les \u00e9crans de moins de 800px *\/\n    }\n}\n\n@media screen and (max-width: 400px) {\n    body {\n        font-size: 0.8em;\n    }\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ressources Utiles pour Aller Plus Loin<\/h3>\n\n\n\n<p><p>Pour approfondir vos connaissances sur les m\u00e9dias queries et les layouts adaptatifs, consultez les ressources suivantes :<\/p>\n<ul>\n    <li><a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/CSS3_MediaQueries\" target=\"_blank\" rel=\"noopener\">Documentation MDN sur les medias queries<\/a><\/li>\n    <li><a href=\"https:\/\/www.w3schools.com\/css\/css_rwd_mediaqueries.asp\" target=\"_blank\" rel=\"noopener\">Tutoriel W3Schools sur les Media Queries<\/a><\/li>\n    <li><a href=\"https:\/\/css-tricks.com\/snippets\/css\/media-queries-for-standard-devices\/\" target=\"_blank\" rel=\"noopener\">Exemples de Media Queries pour diff\u00e9rents appareils sur CSS-Tricks<\/a><\/li>\n    <li><a href=\"https:\/\/www.smashingmagazine.com\/2019\/01\/understanding-media-queries-resolution-width-height\/\" target=\"_blank\" rel=\"noopener\">Understanding Media Queries: Width vs. Resolution<\/a><\/li>\n    <li><a href=\"https:\/\/www.freecodecamp.org\/news\/responsive-web-design-media-queries-and-viewport-88d6a5ba92cb\/\" target=\"_blank\" rel=\"noopener\">Responsive Web Design: Media Queries<\/a><\/li>\n<\/ul><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>m\u00e9dias queries<\/strong> sont une cl\u00e9 pour cr\u00e9er des sites web responsives. Ils vous permettent de fournir une exp\u00e9rience utilisateur adapt\u00e9e \u00e0 une vari\u00e9t\u00e9 d&rsquo;appareils, augmentant ainsi l&rsquo;accessibilit\u00e9 et l&rsquo;attrait de votre site. Continuez \u00e0 exp\u00e9rimenter avec les m\u00e9dias queries pour d\u00e9couvrir tout leur potentiel. Pour en savoir plus sur le responsive design, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/css-r\u00e9sponsive-design\/155\">cours complet sur le CSS responsive design<\/a>. Pour apprendre \u00e0 int\u00e9grer des frameworks comme Bootstrap, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/guide-bootstrap-tutoriel\">guide d\u00e9taill\u00e9 sur Bootstrap<\/a>. D\u00e9couvrez \u00e9galement comment <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\">cr\u00e9er votre premi\u00e8re page HTML<\/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\n","protected":false},"excerpt":{"rendered":"<p>Cr\u00e9ation d&rsquo;un Layout Simple avec M\u00e9dias Queries est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur web. Les m\u00e9dias queries permettent d&rsquo;adapter votre site web \u00e0 diff\u00e9rents&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2716,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5429","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\/5429","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=5429"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5429\/revisions"}],"predecessor-version":[{"id":6066,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5429\/revisions\/6066"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2716"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5429"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5429"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5429"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}