{"id":5365,"date":"2024-08-27T17:01:23","date_gmt":"2024-08-27T17:01:23","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/largeur-minimale-maximale-element-css\/"},"modified":"2024-11-11T16:23:07","modified_gmt":"2024-11-11T16:23:07","slug":"largeur-minimale-maximale-element-css","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/largeur-minimale-maximale-element-css\/","title":{"rendered":"5.3 Largeur Minimale et Maximale d&rsquo;un \u00c9l\u00e9ment en CSS"},"content":{"rendered":"\n\n\n<p><strong>Les propri\u00e9t\u00e9s min-width et max-width<\/strong> en CSS sont cruciales pour d\u00e9finir la largeur minimale et maximale des \u00e9l\u00e9ments sur une page web. Comprendre et utiliser efficacement ces propri\u00e9t\u00e9s peut am\u00e9liorer consid\u00e9rablement la mise en page et la r\u00e9activit\u00e9 de vos sites. Apprenons \u00e0 les utiliser gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>propri\u00e9t\u00e9s min-width et max-width 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\/586317964?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 propri\u00e9t\u00e9s <code>min-width<\/code> et <code>max-width<\/code> en CSS permettent de d\u00e9finir la largeur minimale et maximale des \u00e9l\u00e9ments, respectivement. Gr\u00e2ce \u00e0 ces propri\u00e9t\u00e9s, vous pouvez assurer que vos \u00e9l\u00e9ments gardent des proportions correctes et s&rsquo;adaptent bien aux diff\u00e9rentes r\u00e9solutions d&rsquo;\u00e9cran. Ces caract\u00e9ristiques sont particuli\u00e8rement utiles dans la conception web r\u00e9active (responsive design).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser la Propri\u00e9t\u00e9 Min-width<\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>min-width<\/code> d\u00e9finit la largeur minimale qu&rsquo;un \u00e9l\u00e9ment doit avoir. M\u00eame si le contenu ou conteneur parent est plus petit que cette valeur, l&rsquo;\u00e9l\u00e9ment ne r\u00e9tr\u00e9cira pas au-del\u00e0 de la largeur minimale sp\u00e9cifi\u00e9e. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>div {\n  min-width: 300px;\n  background-color: lightblue;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser la Propri\u00e9t\u00e9 Max-width<\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>max-width<\/code> d\u00e9finit la largeur maximale qu&rsquo;un \u00e9l\u00e9ment peut avoir. M\u00eame si le contenu ou la largeur du conteneur parent est plus large que cette valeur, l&rsquo;\u00e9l\u00e9ment ne s&rsquo;\u00e9tendra pas au-del\u00e0 de la largeur maximale sp\u00e9cifi\u00e9e. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>div {\n  max-width: 100%;\n  background-color: lightcoral;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Combiner Min-width et Max-width<\/h3>\n\n\n\n<p>En combinant <code>min-width<\/code> et <code>max-width<\/code>, vous pouvez d\u00e9finir une plage de dimensions autoris\u00e9es pour votre \u00e9l\u00e9ment, le rendant plus flexible et r\u00e9actif. Voici comment :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>div {\n  min-width: 200px;\n  max-width: 600px;\n  background-color: lightgreen;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Les Applications de Min-width et Max-width en Design R\u00e9actif<\/h3>\n\n\n\n<p>Utiliser ces deux propri\u00e9t\u00e9s ensemble est particuli\u00e8rement b\u00e9n\u00e9fique dans le design r\u00e9actif. Par exemple, les mises en page dites \u00ab\u00a0fluides\u00a0\u00bb qui doivent s&rsquo;adapter aux diff\u00e9rentes tailles d&rsquo;\u00e9cran peuvent b\u00e9n\u00e9ficier de ces d\u00e9finitions :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.container {\n  max-width: 100%;\n  min-width: 300px;\n  margin: 0 auto;\n  padding: 20px;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser Min-width et Max-width pour les Images<\/h3>\n\n\n\n<p>Les images sont \u00e9galement un bon candidat pour l&rsquo;application de ces propri\u00e9t\u00e9s, afin de garantir qu&rsquo;elles ne deviennent ni trop petites ni trop grandes :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>img {\n  max-width: 100%;\n  min-width: 200px;\n  height: auto;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s de Min-width et Max-width<\/h3>\n\n\n\n<p>Pour approfondir notre compr\u00e9hension des propri\u00e9t\u00e9s <code>min-width<\/code> et <code>max-width<\/code> en CSS, voici quelques exemples avanc\u00e9s qui illustrent comment elles peuvent \u00eatre utilis\u00e9es.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Mise en Page Fluide avec des Conteneurs<\/h4>\n\n\n\n<p>Imaginez une mise en page o\u00f9 plusieurs conteneurs doivent s&rsquo;ajuster en fonction de la taille de l&rsquo;\u00e9cran tout en maintenant des proportions coh\u00e9rentes :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.flex-container {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n.flex-item {\n  flex: 1 1 auto;\n  min-width: 150px;\n  max-width: 400px;\n  margin: 10px;\n  padding: 20px;\n  background-color: #f0f0f0;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Utiliser Min-width et Max-width avec les M\u00e9dia Queries<\/h4>\n\n\n\n<p>En combinant ces propri\u00e9t\u00e9s avec les m\u00e9dia queries, vous pouvez cr\u00e9er des mises en page extr\u00eamement flexibles et sp\u00e9cifiques pour diff\u00e9rentes r\u00e9solutions d&rsquo;\u00e9cran.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>@media (max-width: 600px) {\n  .element {\n    max-width: 100%;\n    min-width: 200px;\n  }\n}\n\n@media (min-width: 601px) {\n  .element {\n    max-width: 50%;\n    min-width: 300px;\n  }\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Application dans un Projet R\u00e9el<\/h4>\n\n\n\n<p>Consid\u00e9rons un projet plus complet o\u00f9 <code>min-width<\/code> et <code>max-width<\/code> sont utilis\u00e9s pour cr\u00e9er une mise en page r\u00e9active pour un site de portfolio. Le design s&rsquo;adapte en fonction de la taille de l&rsquo;\u00e9cran pour une exp\u00e9rience utilisateur optimale.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"portfolio-container\"&gt;\n  &lt;div class=\"portfolio-item\"&gt;Projet 1&lt;\/div&gt;\n  &lt;div class=\"portfolio-item\"&gt;Projet 2&lt;\/div&gt;\n  &lt;div class=\"portfolio-item\"&gt;Projet 3&lt;\/div&gt;\n  &lt;div class=\"portfolio-item\"&gt;Projet 4&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.portfolio-container {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 20px;\n}\n\n.portfolio-item {\n  flex: 1 1 auto;\n  min-width: 200px;\n  max-width: 400px;\n  padding: 20px;\n  background-color: #f9f9f9;\n  text-align: center;\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n}\n<\/code><\/pre>\n\n\n\n<p>Poursuivez votre exploration de CSS et des propri\u00e9t\u00e9s <code>min-width<\/code> et <code>max-width<\/code> en consultant des ressources externes. Par exemple, le <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/min-width\" target=\"_blank\" rel=\"noopener\">site MDN Web Docs<\/a> propose des articles d\u00e9taill\u00e9s sur les propri\u00e9t\u00e9s CSS, et le <a href=\"https:\/\/css-tricks.com\/\" target=\"_blank\" rel=\"noopener\">site CSS-Tricks<\/a> offre de nombreux tutoriels et astuces pour la conception CSS. Vous pouvez \u00e9galement suivre des cours en ligne comme ceux de <a href=\"https:\/\/www.codecademy.com\/\" target=\"_blank\" rel=\"noopener\">Codecademy<\/a> pour un apprentissage structur\u00e9. Pour apprendre les bases du langage HTML, consultez notre guide \n\n[Apprendre les fondamentaux](https:\/\/wikiform.fr\/codespace\/bases-langage-html-apprendre-fondamentaux)\n\n.<\/p>\n\n<p>Pour ceux qui souhaitent approfondir leur connaissance du HTML afin de cr\u00e9er leur premi\u00e8re page web, voici un \n\n[tutoriel facile](https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile)\n\n qui vous guide pas \u00e0 pas. Par ailleurs, d\u00e9couvrir d&rsquo;autres \u00e9l\u00e9ments HTML peut apporter de la richesse \u00e0 votre page, par exemple, en utilisant un \n\n[\u00e9l\u00e9ment HTML head](https:\/\/wikiform.fr\/codespace\/element-html-head-tout-savoir)\n\n ou des \n\n[\u00e9l\u00e9ments textuels HTML](https:\/\/wikiform.fr\/codespace\/elements-textuels-html-guide-complet)\n\n.<\/p>\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n<p>Les propri\u00e9t\u00e9s <strong>min-width<\/strong> et <strong>max-width<\/strong> en CSS sont des outils essentiels pour cr\u00e9er des mises en page flexibles et r\u00e9actives. En les utilisant, vous pouvez contr\u00f4ler les dimensions de vos \u00e9l\u00e9ments de mani\u00e8re pr\u00e9cise, assurant une meilleure adaptabilit\u00e9 et exp\u00e9rience utilisateur sur diff\u00e9rents dispositifs. Continuez \u00e0 explorer ces propri\u00e9t\u00e9s et d&rsquo;autres techniques CSS pour ma\u00eetriser la conception web moderne. Pour plus de tutoriels sur CSS, consultez nos articles sur \n\n[les propri\u00e9t\u00e9s de texte en CSS](https:\/\/wikiform.fr\/codespace\/proprietes-css-texte-tout-comprendre)\n\n et \n\n[le mod\u00e8le de bo\u00eete flexible avec Flexbox en CSS](https:\/\/wikiform.fr\/codespace\/modele-boite-flexible-flexbox-css)\n\n. Vous pouvez \u00e9galement explorer les \n\n[grilles CSS](https:\/\/wikiform.fr\/codespace\/creation-grille-css-guide-pratique)\n\n pour des mises en page plus complexifi\u00e9es.<\/p>\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<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 src=\"https:\/\/wikiform.fr\/codespace\/wp\n","protected":false},"excerpt":{"rendered":"<p>Les propri\u00e9t\u00e9s min-width et max-width en CSS sont cruciales pour d\u00e9finir la largeur minimale et maximale des \u00e9l\u00e9ments sur une page web. Comprendre et utiliser&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2745,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5365","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\/5365","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=5365"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5365\/revisions"}],"predecessor-version":[{"id":6038,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5365\/revisions\/6038"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2745"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5365"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5365"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}