{"id":5363,"date":"2024-08-27T16:56:50","date_gmt":"2024-08-27T16:56:50","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/unites-mesures-css-guide-pratique\/"},"modified":"2024-08-27T16:56:53","modified_gmt":"2024-08-27T16:56:53","slug":"unites-mesures-css-guide-pratique","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/unites-mesures-css-guide-pratique\/","title":{"rendered":"5.2 Unit\u00e9s de Mesures en CSS : Guide Pratique"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>5.2 Unit\u00e9s de Mesures en CSS : Guide Pratique<\/strong> est un sujet essentiel pour tout d\u00e9veloppeur web cherchant \u00e0 ma\u00eetriser l&rsquo;agencement et l&rsquo;apparence de ses pages web. Comprendre comment utiliser judicieusement les diff\u00e9rentes unit\u00e9s de mesure en CSS peut am\u00e9liorer consid\u00e9rablement la flexibilit\u00e9 et l&rsquo;adaptabilit\u00e9 des interfaces. Apprenons ensemble les diff\u00e9rentes unit\u00e9s disponibles et comment les impl\u00e9menter efficacement dans vos projets gr\u00e2ce \u00e0 des exemples concrets. Pour en savoir plus sur les bases des langages de d\u00e9veloppement web, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/bases-langage-html-apprendre-fondamentaux\">guide sur les fondamentaux du HTML<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Unit\u00e9s de Mesures 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\/586316763?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 unit\u00e9s de mesure CSS sont diverses et parfois sp\u00e9cifiques \u00e0 certaines propri\u00e9t\u00e9s. Les unit\u00e9s les plus courantes incluent les pixels (px), les pourcentages (%), les em et rem, ainsi que les unit\u00e9s relatives \u00e0 la taille de la fen\u00eatre du navigateur comme les vh et vw. Comprendre quand et comment utiliser chaque type d&rsquo;unit\u00e9 est crucial pour cr\u00e9er des designs r\u00e9actifs et flexibles. Pour d\u00e9couvrir davantage sur la syntaxe du CSS, explorez notre <a href=\"https:\/\/wikiform.fr\/codespace\/syntaxe-css-bases-connaitre\">guide sur les bases de la syntaxe CSS<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les Unit\u00e9s Absolues<\/h3>\n\n\n\n<p>Les unit\u00e9s absolues sont utilis\u00e9es lorsque vous souhaitez sp\u00e9cifier une taille fixe. Parmi celles-ci, on trouve les pixels (px), les points (pt), les pouces (in), les millim\u00e8tres (mm) et les centim\u00e8tres (cm). La plus couramment utilis\u00e9e est le pixel :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>p {\n    font-size: 16px;\n    margin: 10px;\n    padding: 5mm;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Les Unit\u00e9s Relatives<\/h3>\n\n\n\n<p>Les unit\u00e9s relatives offrent une meilleure flexibilit\u00e9 en s&rsquo;adaptant \u00e0 la taille des \u00e9l\u00e9ments parents ou de la fen\u00eatre. Les plus connues sont le pourcentage (%), em, rem, vw, et vh :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>div {\n    width: 50%;\n    height: 50vh;\n    padding: 2em;\n    font-size: 1.5rem;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Comprendre les Unit\u00e9s EM et REM<\/h3>\n\n\n\n<p>Les unit\u00e9s em et rem sont particuli\u00e8rement utiles pour cr\u00e9er des mises en page fluides et r\u00e9actives. L&rsquo;unit\u00e9 em est relative \u00e0 la taille de la police de l&rsquo;\u00e9l\u00e9ment parent, tandis que rem est relative \u00e0 la taille de la police de l&rsquo;\u00e9l\u00e9ment racine (html) :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>html {\n    font-size: 16px;\n}\n\nbody {\n    font-size: 1rem; \/* 16px *\/\n}\n\nh1 {\n    font-size: 2em; \/* 32px *\/\n}\n\np {\n    font-size: 1.25rem; \/* 20px *\/\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Unit\u00e9s de Vue (VW et VH)<\/h3>\n\n\n\n<p>Les unit\u00e9s vw et vh sont relatives \u00e0 la taille de la fen\u00eatre du navigateur. 1vw est \u00e9gal \u00e0 1% de la largeur de la fen\u00eatre et 1vh \u00e0 1% de la hauteur de la fen\u00eatre. Ces unit\u00e9s sont parfaites pour les mises en page adaptatives :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>header {\n    height: 10vh;\n    padding: 2vw;\n}\n\n.fullscreen {\n    width: 100vw;\n    height: 100vh;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Pratiques d&rsquo;Utilisation d&rsquo;Unit\u00e9s CSS<\/h3>\n\n\n\n<p>Pour illustrer l&rsquo;utilisation des diff\u00e9rentes unit\u00e9s, voici un exemple de page avec des styles vari\u00e9s. Avant de continuer, il peut \u00eatre utile de comprendre comment <a href=\"https:\/\/wikiform.fr\/codespace\/element-html-head-tout-savoir\">structurer la section head de votre document HTML<\/a> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n    font-size: 16px;\n    line-height: 1.5;\n}\n\n.container {\n    width: 80%;\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 2rem;\n}\n\n.article {\n    margin-bottom: 2rem;\n}\n\nheader, footer {\n    background-color: #333;\n    color: #fff;\n    padding: 2em 10vw;\n}\n\nsection {\n    padding: 5vh 2em;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Unit\u00e9s CSS pour le Responsive Design<\/h3>\n\n\n\n<p>Les unit\u00e9s flexibles comme % et vh\/vw sont indispensables pour cr\u00e9er des designs responsives. Par exemple, une mise en page utilisant ces unit\u00e9s s&rsquo;adaptera automatiquement aux diff\u00e9rentes tailles d&rsquo;\u00e9crans :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.responsive-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n    gap: 20px;\n    padding: 2vw;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Bonnes Pratiques et Conseils<\/h3>\n\n\n\n<p>Utiliser les unit\u00e9s de mesure en CSS de mani\u00e8re intelligente peut transformer la flexibilit\u00e9 et la r\u00e9activit\u00e9 de vos designs. Voici quelques conseils pour une utilisation optimale :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Pr\u00e9f\u00e9rez les unit\u00e9s relatives<\/strong> comme % et em\/rem pour une mise en page flexible.<\/li>\n<li><strong>\u00c9vitez l&rsquo;utilisation excessive de pixels<\/strong> car ils ne sont pas adaptatifs.<\/li>\n<li><strong>Combinez diff\u00e9rentes unit\u00e9s<\/strong> pour atteindre des r\u00e9sultats optimaux (par exemple, utilisez vh ou vw pour les marges et pads tout en utilisant rem ou em pour les polices).<\/li>\n<li><strong>Testez sur diff\u00e9rents \u00e9crans<\/strong> pour assurer une adaptabilit\u00e9 parfaite.<\/li>\n<li><strong>Optimisez vos images<\/strong> et autres m\u00e9dias pour qu&rsquo;ils s&rsquo;affichent correctement \u00e0 diff\u00e9rentes r\u00e9solutions.<\/li>\n<li><strong>Utilisez des outils comme l\u2019inspecteur d\u2019\u00e9l\u00e9ments<\/strong> pour d\u00e9boguer vos pages HTML et CSS.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La connaissance approfondie des <strong>unit\u00e9s de mesure en CSS<\/strong> est essentielle pour tout d\u00e9veloppeur front-end. En utilisant judicieusement ces unit\u00e9s, vous pouvez cr\u00e9er des interfaces web r\u00e9actives, accessibles et esth\u00e9tiques. Pour aller plus loin, nous vous recommandons de consulter notre <a href=\"https:\/\/wikiform.fr\/codespace\/cours-advanced-techniques-css\">cours avanc\u00e9 sur le CSS<\/a> qui aborde en d\u00e9tail de nombreuses autres techniques avanc\u00e9es. Bon codage !<\/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\">\n  <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=\"\">\n<\/a>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/advanced-css-techniques\/210\" target=\"_blank\" rel=\"noopener\">\n  <img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2025\/07\/learnify-formation-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation CSS Offre 50%\" title=\"\">\n<\/a>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html 5.2 Unit\u00e9s de Mesures en CSS : Guide Pratique est un sujet essentiel pour tout d\u00e9veloppeur web cherchant \u00e0 ma\u00eetriser l&rsquo;agencement et l&rsquo;apparence de&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2785,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5363","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\/5363","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=5363"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5363\/revisions"}],"predecessor-version":[{"id":5364,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5363\/revisions\/5364"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2785"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5363"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5363"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}