{"id":11551,"date":"2019-06-25T10:30:55","date_gmt":"2019-06-25T08:30:55","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=11551"},"modified":"2025-08-20T17:17:18","modified_gmt":"2025-08-20T15:17:18","slug":"unites-mesure-css","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/unites-mesure-css\/","title":{"rendered":"CSS&nbsp;: le guide pour choisir la bonne unit\u00e9 de mesure"},"content":{"rendered":"<p>Dans un <a href=\"https:\/\/graphiste.com\/blog\/bonnes-pratiques-css-feuille-style\" target=\"_blank\" rel=\"noopener noreferrer\">fichier CSS<\/a>, de nombreuses propri\u00e9t\u00e9s cohabitent&nbsp;: des typographies, des couleurs, des valeurs num\u00e9riques, etc. Certaines d&#8217;entre elles ont besoin d&#8217;\u00eatre associ\u00e9es \u00e0 une unit\u00e9 et ce choix est loin d&#8217;\u00eatre anodin.<\/p>\n<p>Il existe plusieurs types d&#8217;unit\u00e9, et chacun influence \u00e0 sa mani\u00e8re le design de votre site. Si vous ne savez pas comment choisir entre le &#8220;px&#8221;, le &#8220;em&#8221;, ou encore le &#8220;vw&#8221;, alors vous tombez bien. Nous allons faire un point sur les unit\u00e9s de mesure en CSS pour que vous puissiez les utiliser correctement.<\/p>\n<ul>\n<li><a href=\"#unites-absolues\">Les unit\u00e9s absolues<\/a><\/li>\n<li><a href=\"#unites-relatives-texte\">Les unit\u00e9s relatives au texte<\/a><\/li>\n<li><a href=\"#unites-relatives-viewport\">Les unit\u00e9s relatives au viewport<\/a><\/li>\n<li><a href=\"#unites-pourcentage\">Les unit\u00e9s en pourcentage<\/a><\/li>\n<\/ul>\n<h2 id=\"unites-absolues\">Les unit\u00e9s absolues<\/h2>\n<p>Il existe des unit\u00e9s en CSS qui ne sont influenc\u00e9es par aucune autre dimension. Appel\u00e9es <strong>unit\u00e9s absolues<\/strong>, elles sont g\u00e9n\u00e9ralement utilis\u00e9es pour traduire une longueur, par exemple un padding, une hauteur de bloc, la taille des caract\u00e8res, etc.<\/p>\n<p>Les unit\u00e9s absolues sont les suivantes&nbsp;:<\/p>\n<ul>\n<li>Les pixels (<strong>px<\/strong>)<\/li>\n<li>Les pouces (<strong>in<\/strong>)<\/li>\n<li>Les centim\u00e8tres (<strong>cm<\/strong>)<\/li>\n<li>Les millim\u00e8tres (<strong>mm<\/strong>)<\/li>\n<li>Les picas (<strong>pc<\/strong>)<\/li>\n<li>Les points (<strong>pt<\/strong>)<\/li>\n<\/ul>\n<p>La plupart du temps, vous n&#8217;utiliserez que le pixel ou le point, mais il est bon de comprendre la relation entre ces unit\u00e9s de mesure.<\/p>\n<p>Retenez donc que 1 in = 96 px, 1 cm = 37,8 px et 1 mm = 3,78 px.<\/p>\n<p>Pour illustrer les unit\u00e9s absolues, prenons un exemple concret. Admettons le code CSS suivant&nbsp;:<\/p>\n<p><code>.box {<br \/>\nwidth&nbsp;: 150px ;<br \/>\nheight&nbsp;: 150 px ;<br \/>\n}<\/code><\/p>\n<p>Cela signifie que l&#8217;\u00e9l\u00e9ment <code>box<\/code> aura la m\u00eame dimension (150 x 150 pixels), quelle que soit la taille de l&#8217;\u00e9cran.<\/p>\n<h2 id=\"unites-relatives-texte\">Les unit\u00e9s relatives au texte<\/h2>\n<p>\u00c0 l&#8217;oppos\u00e9 des unit\u00e9s absolues, il existe des unit\u00e9s qui font varier la taille d&#8217;un \u00e9l\u00e9ment en fonction de la taille de la police ou de l&#8217;\u00e9l\u00e9ment parent.<\/p>\n<p>Ces unit\u00e9s dites <strong>relatives au texte<\/strong> sont de plus en plus utilis\u00e9es pour harmoniser les \u00e9l\u00e9ments d&#8217;un design. On retrouve&nbsp;:<\/p>\n<ul>\n<li><strong>Em<\/strong>&nbsp;: elle est proportionnelle \u00e0 la taille de la police de l&#8217;\u00e9l\u00e9ment parent ou du document. Par d\u00e9faut, 1 em = 16 px si aucune taille de police n&#8217;est d\u00e9finie.<\/li>\n<li><strong>Rem<\/strong>&nbsp;: l&#8217;unit\u00e9 rem fait toujours r\u00e9f\u00e9rence \u00e0 la taille de la police de l&#8217;\u00e9l\u00e9ment racine. En d&#8217;autres termes, elle d\u00e9pend du <code>font-size<\/code> d\u00e9finit par d\u00e9faut.<\/li>\n<li><strong>Ex<\/strong>&nbsp;: tr\u00e8s rarement utilis\u00e9e, cette unit\u00e9 est relative \u00e0 la hauteur de la police actuelle en minuscule.<\/li>\n<li><strong>Ch<\/strong>&nbsp;: cette unit\u00e9 est elle aussi peu utilis\u00e9e, elle est relative \u00e0 la largeur du caract\u00e8re &#8220;0&#8221;.<\/li>\n<\/ul>\n<p>Parmi ces unit\u00e9s relatives au texte, vous serez amen\u00e9 \u00e0 utiliser le em. Cette unit\u00e9 de mesure permet de garder un texte lisible. Autre avantage, si vous souhaitez modifier la taille de votre police d&#8217;\u00e9criture, vos \u00e9l\u00e9ments enfants s&#8217;ajusteront automatiquement.<\/p>\n<h2 id=\"unites-relatives-viewport\">Les unit\u00e9s relatives au viewport<\/h2>\n<p>D&#8217;autres unit\u00e9s permettent aux \u00e9l\u00e9ments de s&#8217;adapter \u00e0 la taille du viewport, c&#8217;est-\u00e0-dire \u00e0 la taille de la fen\u00eatre du navigateur.<\/p>\n<p>Ces unit\u00e9s <strong>relatives au viewport<\/strong> sont essentielles pour mettre en place <a href=\"https:\/\/graphiste.com\/blog\/10-conseils-responsive-design-efficace\" target=\"_blank\" rel=\"noopener noreferrer\">un design responsive<\/a>, et on retrouve&nbsp;:<\/p>\n<ul>\n<li>La hauteur du viewport (<strong>vh<\/strong>)<\/li>\n<li>La largeur du viewport (<strong>vw<\/strong>)<\/li>\n<li>Le viewport minimum (<strong>vmin<\/strong>)<\/li>\n<li>Le viewport maximum (<strong>vmax<\/strong>)<\/li>\n<\/ul>\n<h4>Les unit\u00e9s vh et vw<\/h4>\n<p>Les unit\u00e9s vh et vw sont similaires, \u00e0 la seule diff\u00e9rence qu&#8217;elles d\u00e9pendent respectivement de la hauteur et de la largeur de la fen\u00eatre de navigation.<\/p>\n<p>Retenez que 1 vh = 1 % de la hauteur du viewport et que 1 vw = 1 % de la largeur du viewport.<\/p>\n<p>L&#8217;unit\u00e9 de mesure vh est g\u00e9n\u00e9ralement utilis\u00e9e pour permettre \u00e0 un \u00e9l\u00e9ment de s&#8217;adapter \u00e0 la hauteur totale de la fen\u00eatre&nbsp;:<\/p>\n<p><code>.box {<br \/>\nheight&nbsp;:100vh ;<br \/>\nbackground&nbsp;: red ;<br \/>\n}<\/code><\/p>\n<p>Dans cet exemple ci-dessus, l&#8217;\u00e9l\u00e9ment <code>box<\/code> a une hauteur de 100 % par rapport \u00e0 la hauteur de la fen\u00eatre de navigation.<\/p>\n<p>Prenons un autre exemple&nbsp;:<\/p>\n<p><code>h1{<br \/>\nfont-size&nbsp;: 6 vw ;<br \/>\n}<\/code><\/p>\n<p>Ici la taille du titre H1 correspond \u00e0 6% de la largeur de la fen\u00eatre. Par cons\u00e9quent, si cette derni\u00e8re est de 1000 px, la taille de la police sera de 60 px.<\/p>\n<h4>Les unit\u00e9s vmin et vmax<\/h4>\n<p>Ces deux unit\u00e9s de mesure en CSS fonctionnent selon le m\u00eame principe.<\/p>\n<p>Avec le vmin, c&#8217;est la dimension minimale du viewport qui est prise en compte. Par exemple, si ce dernier est de 1000 px de haut par 800 px de large, les \u00e9l\u00e9ments ayant une unit\u00e9 vmin s&#8217;adapteront en fonction de la largeur de la fen\u00eatre.<\/p>\n<p>Avec le vmax, les \u00e9l\u00e9ments s&#8217;adaptent en fonction de la dimension maximale du viewport. Selon l&#8217;exemple pr\u00e9c\u00e9dent, 1 vmax = 10 px.<\/p>\n<h2 id=\"unites-pourcentage\">Les unit\u00e9s en pourcentage<\/h2>\n<p>Le pourcentage fait partie des unit\u00e9s relatives de fa\u00e7on g\u00e9n\u00e9rale puisqu&#8217;il s&#8217;adapte en fonction de son \u00e9l\u00e9ment parent.<\/p>\n<p>La plupart du temps, cette unit\u00e9 est utilis\u00e9e pour d\u00e9finir la hauteur et la largeur d&#8217;un \u00e9l\u00e9ment. Vous la retrouverez notamment dans le framework Bootstrap.<\/p>\n<blockquote><p><strong>\u00c0 lire aussi&nbsp;:<\/strong><a href=\"https:\/\/www.codeur.com\/tuto\/css\/unite-de-mesure-taille-px-em-rem\/\" target=\"_blank\" rel=\"noopener noreferrer\"> px, %, em, rem\u2026 quelle unit\u00e9 de mesure utiliser en CSS&nbsp;?<\/a><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Dans un fichier CSS, de nombreuses propri\u00e9t\u00e9s cohabitent&nbsp;: des typographies, des couleurs, des valeurs num\u00e9riques, etc. Certaines d&#8217;entre elles ont besoin d&#8217;\u00eatre associ\u00e9es \u00e0 une unit\u00e9 et ce choix est loin d&#8217;\u00eatre anodin. Il existe plusieurs types d&#8217;unit\u00e9, et chacun influence \u00e0 sa mani\u00e8re le design de votre site. Si vous ne savez pas comment [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":11618,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[31],"tags":[],"class_list":["post-11551","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS : le guide pour choisir la bonne unit\u00e9 de mesure - Graphiste Blog<\/title>\n<meta name=\"description\" content=\"Dans un fichier CSS, de nombreuses propri\u00e9t\u00e9s cohabitent : des typographies, des couleurs, des valeurs num\u00e9riques, etc. Certaines d&#039;entre elles ont besoin\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/graphiste.com\/blog\/unites-mesure-css\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS : le guide pour choisir la bonne unit\u00e9 de mesure - Graphiste Blog\" \/>\n<meta property=\"og:description\" content=\"Dans un fichier CSS, de nombreuses propri\u00e9t\u00e9s cohabitent : des typographies, des couleurs, des valeurs num\u00e9riques, etc. Certaines d&#039;entre elles ont besoin\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphiste.com\/blog\/unites-mesure-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Graphiste.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/graphistesfreelances\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-25T08:30:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-20T15:17:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/06\/unite-mesure-css-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"850\" \/>\n\t<meta property=\"og:image:height\" content=\"423\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Thomas Lazzaroni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@totolazza\" \/>\n<meta name=\"twitter:site\" content=\"@Graphistecom\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thomas Lazzaroni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/graphiste.com\/blog\/unites-mesure-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/unites-mesure-css\/\"},\"author\":{\"name\":\"Thomas Lazzaroni\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5\"},\"headline\":\"CSS&nbsp;: le guide pour choisir la bonne unit\u00e9 de mesure\",\"datePublished\":\"2019-06-25T08:30:55+00:00\",\"dateModified\":\"2025-08-20T15:17:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/unites-mesure-css\/\"},\"wordCount\":847,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/unites-mesure-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/06\/unite-mesure-css-1.jpg\",\"articleSection\":[\"HTML &amp; CSS\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/graphiste.com\/blog\/unites-mesure-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/graphiste.com\/blog\/unites-mesure-css\/\",\"url\":\"https:\/\/graphiste.com\/blog\/unites-mesure-css\/\",\"name\":\"CSS : le guide pour choisir la bonne unit\u00e9 de mesure - Graphiste Blog\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/unites-mesure-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/unites-mesure-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/06\/unite-mesure-css-1.jpg\",\"datePublished\":\"2019-06-25T08:30:55+00:00\",\"dateModified\":\"2025-08-20T15:17:18+00:00\",\"description\":\"Dans un fichier CSS, de nombreuses propri\u00e9t\u00e9s cohabitent : des typographies, des couleurs, des valeurs num\u00e9riques, etc. Certaines d'entre elles ont besoin\",\"breadcrumb\":{\"@id\":\"https:\/\/graphiste.com\/blog\/unites-mesure-css\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/graphiste.com\/blog\/unites-mesure-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/unites-mesure-css\/#primaryimage\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/06\/unite-mesure-css-1.jpg\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/06\/unite-mesure-css-1.jpg\",\"width\":850,\"height\":423,\"caption\":\"Unit\u00e9s de mesure en CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/graphiste.com\/blog\/unites-mesure-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/graphiste.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Webdesign\",\"item\":\"https:\/\/graphiste.com\/blog\/webdesign\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML &amp; CSS\",\"item\":\"https:\/\/graphiste.com\/blog\/webdesign\/html-css\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"CSS&nbsp;: le guide pour choisir la bonne unit\u00e9 de mesure\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/graphiste.com\/blog\/#website\",\"url\":\"https:\/\/graphiste.com\/blog\/\",\"name\":\"Graphiste.com\",\"description\":\"graphiste\",\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/graphiste.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\",\"name\":\"Graphiste.com\",\"url\":\"https:\/\/graphiste.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg\",\"width\":1,\"height\":1,\"caption\":\"Graphiste.com\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/graphistesfreelances\",\"https:\/\/x.com\/Graphistecom\",\"https:\/\/www.linkedin.com\/company\/graphiste-com\/\",\"https:\/\/fr.pinterest.com\/Graphiste_Com\",\"https:\/\/www.instagram.com\/graphiste_com\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5\",\"name\":\"Thomas Lazzaroni\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g\",\"caption\":\"Thomas Lazzaroni\"},\"description\":\"Depuis plus de 10 ans, je contribue \u00e0 faire rayonner nos sites en imaginant des strat\u00e9gies qui renforcent notre visibilit\u00e9 et notre position de r\u00e9f\u00e9rence.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/thomaslazzaroni\/\",\"https:\/\/x.com\/totolazza\"],\"url\":\"https:\/\/graphiste.com\/blog\/author\/thomas\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS : le guide pour choisir la bonne unit\u00e9 de mesure - Graphiste Blog","description":"Dans un fichier CSS, de nombreuses propri\u00e9t\u00e9s cohabitent : des typographies, des couleurs, des valeurs num\u00e9riques, etc. Certaines d'entre elles ont besoin","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/graphiste.com\/blog\/unites-mesure-css\/","og_locale":"fr_FR","og_type":"article","og_title":"CSS : le guide pour choisir la bonne unit\u00e9 de mesure - Graphiste Blog","og_description":"Dans un fichier CSS, de nombreuses propri\u00e9t\u00e9s cohabitent : des typographies, des couleurs, des valeurs num\u00e9riques, etc. Certaines d'entre elles ont besoin","og_url":"https:\/\/graphiste.com\/blog\/unites-mesure-css\/","og_site_name":"Graphiste.com","article_publisher":"https:\/\/www.facebook.com\/graphistesfreelances","article_published_time":"2019-06-25T08:30:55+00:00","article_modified_time":"2025-08-20T15:17:18+00:00","og_image":[{"width":850,"height":423,"url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/06\/unite-mesure-css-1.jpg","type":"image\/jpeg"}],"author":"Thomas Lazzaroni","twitter_card":"summary_large_image","twitter_creator":"@totolazza","twitter_site":"@Graphistecom","twitter_misc":{"\u00c9crit par":"Thomas Lazzaroni","Dur\u00e9e de lecture estim\u00e9e":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/graphiste.com\/blog\/unites-mesure-css\/#article","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/unites-mesure-css\/"},"author":{"name":"Thomas Lazzaroni","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5"},"headline":"CSS&nbsp;: le guide pour choisir la bonne unit\u00e9 de mesure","datePublished":"2019-06-25T08:30:55+00:00","dateModified":"2025-08-20T15:17:18+00:00","mainEntityOfPage":{"@id":"https:\/\/graphiste.com\/blog\/unites-mesure-css\/"},"wordCount":847,"commentCount":0,"publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"image":{"@id":"https:\/\/graphiste.com\/blog\/unites-mesure-css\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/06\/unite-mesure-css-1.jpg","articleSection":["HTML &amp; CSS"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/graphiste.com\/blog\/unites-mesure-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/graphiste.com\/blog\/unites-mesure-css\/","url":"https:\/\/graphiste.com\/blog\/unites-mesure-css\/","name":"CSS : le guide pour choisir la bonne unit\u00e9 de mesure - Graphiste Blog","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/graphiste.com\/blog\/unites-mesure-css\/#primaryimage"},"image":{"@id":"https:\/\/graphiste.com\/blog\/unites-mesure-css\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/06\/unite-mesure-css-1.jpg","datePublished":"2019-06-25T08:30:55+00:00","dateModified":"2025-08-20T15:17:18+00:00","description":"Dans un fichier CSS, de nombreuses propri\u00e9t\u00e9s cohabitent : des typographies, des couleurs, des valeurs num\u00e9riques, etc. Certaines d'entre elles ont besoin","breadcrumb":{"@id":"https:\/\/graphiste.com\/blog\/unites-mesure-css\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphiste.com\/blog\/unites-mesure-css\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/unites-mesure-css\/#primaryimage","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/06\/unite-mesure-css-1.jpg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/06\/unite-mesure-css-1.jpg","width":850,"height":423,"caption":"Unit\u00e9s de mesure en CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/graphiste.com\/blog\/unites-mesure-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/graphiste.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Webdesign","item":"https:\/\/graphiste.com\/blog\/webdesign\/"},{"@type":"ListItem","position":3,"name":"HTML &amp; CSS","item":"https:\/\/graphiste.com\/blog\/webdesign\/html-css\/"},{"@type":"ListItem","position":4,"name":"CSS&nbsp;: le guide pour choisir la bonne unit\u00e9 de mesure"}]},{"@type":"WebSite","@id":"https:\/\/graphiste.com\/blog\/#website","url":"https:\/\/graphiste.com\/blog\/","name":"Graphiste.com","description":"graphiste","publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/graphiste.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/graphiste.com\/blog\/#organization","name":"Graphiste.com","url":"https:\/\/graphiste.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","width":1,"height":1,"caption":"Graphiste.com"},"image":{"@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/graphistesfreelances","https:\/\/x.com\/Graphistecom","https:\/\/www.linkedin.com\/company\/graphiste-com\/","https:\/\/fr.pinterest.com\/Graphiste_Com","https:\/\/www.instagram.com\/graphiste_com\/"]},{"@type":"Person","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5","name":"Thomas Lazzaroni","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g","caption":"Thomas Lazzaroni"},"description":"Depuis plus de 10 ans, je contribue \u00e0 faire rayonner nos sites en imaginant des strat\u00e9gies qui renforcent notre visibilit\u00e9 et notre position de r\u00e9f\u00e9rence.","sameAs":["https:\/\/www.linkedin.com\/in\/thomaslazzaroni\/","https:\/\/x.com\/totolazza"],"url":"https:\/\/graphiste.com\/blog\/author\/thomas\/"}]}},"_links":{"self":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/11551","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/comments?post=11551"}],"version-history":[{"count":0,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/11551\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media\/11618"}],"wp:attachment":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media?parent=11551"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/categories?post=11551"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/tags?post=11551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}