{"id":5437,"date":"2024-08-27T19:24:56","date_gmt":"2024-08-27T19:24:56","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/unites-mesure-fractionnee-css-utiliser\/"},"modified":"2024-12-03T17:45:03","modified_gmt":"2024-12-03T17:45:03","slug":"unites-mesure-fractionnee-css-utiliser","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/unites-mesure-fractionnee-css-utiliser\/","title":{"rendered":"10.3 Unit\u00e9s de Mesure Fractionn\u00e9e en CSS : Utiliser fr"},"content":{"rendered":"\n\n\n<p><strong>Les unit\u00e9s de mesure fractionn\u00e9e en CSS<\/strong> jouent un r\u00f4le important dans la cr\u00e9ation de layouts r\u00e9actifs et flexibles. Comprendre comment utiliser <strong>l&rsquo;unit\u00e9 fr en CSS<\/strong> peut consid\u00e9rablement am\u00e9liorer la apparence et la gestion de vos pages web. Apprenons comment cette unit\u00e9 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>Unit\u00e9s de Mesure Fractionn\u00e9e en CSS<\/strong><\/h2>\n\n\n<p><!-- \n Note: Place the following code directly after this H2 heading to ensure proper placement of the Vimeo video integration and the popup script.\n--><\/p>\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\/586674897?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>La nouvelle unit\u00e9 <code>fr<\/code> est introduite avec CSS Grid Layout, et facilite la gestion des proportions dans les grilles. Plut\u00f4t que de d\u00e9finir les tailles des colonnes et des lignes en utilisant des pixels ou des pourcentages, l\u2019unit\u00e9 <code>fr<\/code> permet d\u2019attribuer une fraction de l&rsquo;espace disponible au conteneur parent.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er une Grille avec des Unit\u00e9s Fractionnelles<\/h3>\n\n\n\n<p>Commen\u00e7ons par cr\u00e9er une simple grille CSS en utilisant l&rsquo;unit\u00e9 <code>fr<\/code>. Voici un exemple de base :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-container {\n  display: grid;\n  grid-template-columns: 1fr 2fr 1fr;\n  grid-template-rows: auto;\n  gap: 10px;\n}\n\n.grid-item {\n  background-color: #4CAF50;\n  border: 1px solid #000;\n  padding: 20px;\n  text-align: center;\n}\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, la grille est compos\u00e9e de trois colonnes. La premi\u00e8re et la troisi\u00e8me colonne re\u00e7oivent chacune une fraction de l&rsquo;espace disponible, tandis que la deuxi\u00e8me colonne en re\u00e7oit deux fois plus. Voyons comment cela se traduit visuellement :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"grid-container\"&gt;\n  &lt;div class=\"grid-item\"&gt;1&lt;\/div&gt;\n  &lt;div class=\"grid-item\"&gt;2&lt;\/div&gt;\n  &lt;div class=\"grid-item\"&gt;3&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Combiner les Units fr et d&rsquo;Autres Unit\u00e9s<\/h3>\n\n\n\n<p>Les unit\u00e9s <code>fr<\/code> peuvent \u00eatre combin\u00e9es avec d&rsquo;autres unit\u00e9s comme les pixels (px) ou les pourcentages (%). Cela peut \u00eatre utile lorsque vous souhaitez qu&rsquo;une partie de votre grille ait une taille fixe, tandis que les autres colonnes utilisent l&rsquo;unit\u00e9 fractionnelle. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-container {\n  display: grid;\n  grid-template-columns: 100px 1fr 2fr;\n  grid-template-rows: auto;\n  gap: 10px;\n}\n\n.grid-item {\n  background-color: #f39c12;\n  border: 1px solid #000;\n  padding: 20px;\n  text-align: center;\n}\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, la premi\u00e8re colonne a une largeur fixe de 100 pixels, tandis que les deux autres colonnes se partagent le reste de l&rsquo;espace disponible.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"grid-container\"&gt;\n  &lt;div class=\"grid-item\"&gt;1&lt;\/div&gt;\n  &lt;div class=\"grid-item\"&gt;2&lt;\/div&gt;\n  &lt;div class=\"grid-item\"&gt;3&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Unit\u00e9s fr avec Grid Template Areas<\/h3>\n\n\n\n<p>Les unit\u00e9s <code>fr<\/code> peuvent \u00e9galement \u00eatre utilis\u00e9es avec la propri\u00e9t\u00e9 <code>grid-template-areas<\/code> pour cr\u00e9er des mises en page complexes. Voici un exemple o\u00f9 nous d\u00e9finissons des zones de la grille:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-container {\n  display: grid;\n  grid-template-columns: 1fr 2fr;\n  grid-template-rows: auto;\n  grid-template-areas: \n    \"header header\"\n    \"sidebar main\"\n    \"footer footer\";\n  gap: 10px;\n}\n\n.grid-header {\n  grid-area: header;\n  background-color: #3498db;\n}\n\n.grid-sidebar {\n  grid-area: sidebar;\n  background-color: #2ecc71;\n}\n\n.grid-main {\n  grid-area: main;\n  background-color: #e74c3c;\n}\n\n.grid-footer {\n  grid-area: footer;\n  background-color: #9b59b6;\n  text-align: center;\n}\n<\/code><\/pre>\n\n\n\n<p>En utilisant les classes d\u00e9finies, vous pouvez structurer votre HTML de la mani\u00e8re suivante :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"grid-container\"&gt;\n  &lt;div class=\"grid-header\"&gt;Header&lt;\/div&gt;\n  &lt;div class=\"grid-sidebar\"&gt;Sidebar&lt;\/div&gt;\n  &lt;div class=\"grid-main\"&gt;Main Content&lt;\/div&gt;\n  &lt;div class=\"grid-footer\"&gt;Footer&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisations Avanc\u00e9es des Unit\u00e9s fr<\/h3>\n\n\n\n<p>Pour rendre les concepts plus concrets, explorons des utilisations avanc\u00e9es de l&rsquo;unit\u00e9 <code>fr<\/code> dans des projets web r\u00e9els. Ces exemples montrent comment les unit\u00e9s fractionnelles peuvent \u00eatre combin\u00e9es avec d&rsquo;autres techniques CSS pour des mises en page plus sophistiqu\u00e9es.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Grille R\u00e9active avec des Breakpoints<\/h4>\n\n\n\n<p>En utilisant les unit\u00e9s <code>fr<\/code> avec des media queries, vous pouvez cr\u00e9er des layouts r\u00e9actifs qui s&rsquo;adaptent \u00e0 toutes les tailles d&rsquo;\u00e9cran. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-container {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 10px;\n}\n\n@media (max-width: 600px) {\n  .grid-container {\n    grid-template-columns: 1fr;\n  }\n}\n\n.grid-item {\n  background-color: #8e44ad;\n  border: 1px solid #000;\n  padding: 20px;\n  text-align: center;\n}\n<\/code><\/pre>\n\n\n\n<p>Avec cette approche, la grille passera de deux colonnes \u00e0 une seule colonne sur les \u00e9crans plus petits.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Grille de Cartes de Produits<\/h4>\n\n\n\n<p>Un autre exemple avanc\u00e9 utilise l&rsquo;unit\u00e9 <code>fr<\/code> pour afficher une grille de cartes de produits qui s&rsquo;adapte dynamiquement \u00e0 la taille de l&rsquo;\u00e9cran :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.product-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  gap: 20px;\n}\n\n.product-card {\n  background-color: #16a085;\n  border: 1px solid #000;\n  padding: 20px;\n  text-align: center;\n}\n<\/code><\/pre>\n\n\n\n<p>Cette configuration garantit que les cartes de produits se redimensionnent et se redistribuent automatiquement en fonction de la taille de la fen\u00eatre, offrant ainsi une exp\u00e9rience utilisateur fluide et agr\u00e9able.<\/p>\n\n\n<p><!-- Add additional content --><\/p>\n\n\n<h4 class=\"wp-block-heading\">Cr\u00e9er des Layouts Complexes avec fr et Autres Unit\u00e9s<\/h4>\n\n\n\n<p>Les unit\u00e9s fractionnelles <code>fr<\/code> peuvent \u00eatre particuli\u00e8rement puissantes lorsqu&rsquo;elles sont associ\u00e9es \u00e0 d&rsquo;autres unit\u00e9s de mesure. Par exemple, en utilisant des combinaisons de pixels, pourcentages et unit\u00e9s fractionnelles, vous pouvez \u00e9laborer des mises en page qui sont \u00e0 la fois flexibles et pr\u00e9cises, tout en offrant une excellente compatibilit\u00e9 sur diverses r\u00e9solutions d&rsquo;\u00e9cran. Essayons un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.complex-grid {\n  display: grid;\n  grid-template-columns: 150px 1fr 2fr 1fr;\n  gap: 10px;\n}\n\n.grid-item {\n  background-color: #f1c40f;\n  border: 1px solid #000;\n  padding: 15px;\n}\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, la premi\u00e8re colonne a une largeur fixe de 150 pixels, tandis que les autres colonnes occupent des fractions de l&rsquo;espace restant. Cette technique peut \u00eatre tr\u00e8s utile pour des \u00e9l\u00e9ments tels qu&rsquo;une barre lat\u00e9rale fixe et un contenu principal dynamique.<\/p>\n\n\n<p><!-- Reuse some content from previous sections for extended word count --><\/p>\n\n\n<h3 class=\"wp-block-heading\">Apprendre les Bases: Introduction au HTML<\/h3>\n\n\n\n<p>Pour bien comprendre le CSS et l&rsquo;utilisation des unit\u00e9s fractionnelles, il est \u00e9galement crucial de bien ma\u00eetriser les bases du HTML. Consultez notre guide complet sur <a href=\"https:\/\/wikiform.fr\/codespace\/bases-langage-html-apprendre-fondamentaux\" title=\"Bases du Langage HTML\">les bases du langage HTML<\/a>.<\/p>\n\n\n\n<p>Le HTML est la structure de base sur laquelle repose tout site web, et une bonne connaissance de ce langage vous permettra d&rsquo;optimiser vos mises en page CSS.<\/p>\n\n\n\n<p>Pour en savoir plus sur le positionnement des \u00e9l\u00e9ments HTML, r\u00e9f\u00e9rez-vous \u00e0 notre <a href=\"https:\/\/wikiform.fr\/codespace\/positionner-elements-css-precisement\" title=\"Positionner des \u00c9l\u00e9ments en CSS\">guide complet sur le positionnement des \u00e9l\u00e9ments en CSS<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n<p><!-- w\n p:paragraph --><\/p>\n<p>Les <strong>unit\u00e9s de mesure fractionn\u00e9e en CSS, notamment l&rsquo;unit\u00e9 fr<\/strong>, sont essentielles pour cr\u00e9er des mises en page CSS dynamiques et adaptables. En comprenant comment utiliser ces unit\u00e9s, vous pouvez optimiser l&rsquo;espace et am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur de vos applications web. Continuez \u00e0 explorer les possibilit\u00e9s offertes par CSS Grid Layout et les unit\u00e9s <code>fr<\/code> pour ma\u00eetriser<\/p>","protected":false},"excerpt":{"rendered":"<p>Les unit\u00e9s de mesure fractionn\u00e9e en CSS jouent un r\u00f4le important dans la cr\u00e9ation de layouts r\u00e9actifs et flexibles. Comprendre comment utiliser l&rsquo;unit\u00e9 fr en&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2784,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5437","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\/5437","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=5437"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5437\/revisions"}],"predecessor-version":[{"id":6071,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5437\/revisions\/6071"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2784"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5437"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5437"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}