{"id":5722,"date":"2026-10-14T20:47:56","date_gmt":"2026-10-14T17:47:56","guid":{"rendered":"https:\/\/wpcalc.com\/fr\/convertisseurs\/convertisseur-unites-css\/"},"modified":"2026-10-14T20:47:56","modified_gmt":"2026-10-14T17:47:56","slug":"convertisseur-unites-css","status":"publish","type":"post","link":"https:\/\/wpcalc.com\/fr\/convertisseurs\/convertisseur-unites-css\/","title":{"rendered":"Convertisseur d'unit\u00e9s CSS"},"content":{"rendered":"<section class=\"not-prose calculator-box\" aria-labelledby=\"calculator-title\"><div class=\"flex items-baseline sm:items-center justify-between gap-2 sm:gap-3\"><div class=\"flex flex-col sm:flex-row sm:items-center gap-2\"><span class=\"icon icon-calculator text-primary-700! text-base! dark:text-primary-300!\" aria-hidden=\"true\"><\/span><h2 id=\"calculator-title\" class=\"text-lg font-display font-bold\">Convertisseur d&#039;unit\u00e9s CSS : px, rem, em, vw et vh<\/h2><\/div><div class=\"calcdash-favorite group\">\n  <button type=\"button\" class=\"favorite\" id=\"favorite\" data-favorite-id=\"5722\" data-favorite-title=\"Unit\u00e9s CSS\" data-favorite-url=\"https:\/\/wpcalc.com\/fr\/convertisseurs\/convertisseur-unites-css\/\" data-favorite-excerpt=\"Convertissez une longueur CSS entre px, rem, em, vw, vh, pt et pourcent. Saisissez la valeur, choisissez son unit\u00e9, indiquez la taille de police racine et parente ainsi que les dimensions de la fen\u00eatre, et obtenez tous les \u00e9quivalents en une seule fois.\" aria-label=\"Ajouter aux favoris\" data-favorite-icon=\"icon icon-other\">\n    <span class=\"icon icon-shape-star-empty\" aria-hidden=\"true\"><\/span>\n  <\/button>\n  <div class=\"calcdash-favorite__tip\" aria-hidden=\"true\">\n   <span class=\"favorite-tooltip\" id=\"favorite-tooltip\"><\/span>\n  <\/div>\n  <span class=\"sr-only\" role=\"status\" id=\"favorite-status\"><\/span>\n<\/div><\/div><form action=\"https:\/\/wpcalc.com\/fr\/convertisseurs\/convertisseur-unites-css\/\" method=\"POST\" class=\"calculator\" id=\"calculator-5722\" data-post=\"5722\"><fieldset class=\"fieldset-input is-1\"><legend class=\"sr-only\">Champs de saisie<\/legend><div class=\"field has-term\" id=\"input-1\"><label for=\"field-1\">Valeur<\/label><div class=\"term\">v<\/div>  <div class=\"absolute bottom-0 left-16 top-8 w-2 h-0.5 bg-blue-500\"><\/div><input type=\"number\" name=\"valeur\" id=\"field-1\" aria-describedby=\"calc-info-1\" placeholder=\"e.g. 24\" step=\"any\" value=\"24\"\/><small id=\"calc-info-1\">La longueur que vous souhaitez convertir. Les valeurs n\u00e9gatives (par exemple des marges n\u00e9gatives) sont autoris\u00e9es.<\/small><\/div><div class=\"field\" id=\"input-2\"><label for=\"field-2\">Unit\u00e9 CSS<\/label><div class=\"grid grid-cols-1\"><select id=\"field-2\" name=\"unit_css\"><option value=\"px\" selected>px (pixels)<\/option><option value=\"rem\">rem (em racine)<\/option><option value=\"em\">em (relative \u00e0 la taille de police du parent)<\/option><option value=\"vw\">vw (largeur du viewport)<\/option><option value=\"vh\">vh (hauteur du viewport)<\/option><option value=\"pt\">pt (points)<\/option><option value=\"%\">% (pourcentage de la taille de police du parent)<\/option><\/select><svg class=\"pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n              <path fill-rule=\"evenodd\" d=\"M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z\" clip-rule=\"evenodd\" \/>\n            <\/svg><\/div><\/div><div class=\"field has-term\" id=\"input-3\"><label for=\"field-3\">Taille de police racine<\/label><div class=\"term\">rem<\/div>  <div class=\"absolute bottom-0 left-16 top-8 w-2 h-0.5 bg-blue-500\"><\/div><input type=\"text\" name=\"taille_de_police_racine\" id=\"field-3\" aria-describedby=\"calc-unit-3 calc-info-3\" data-number inputmode=\"decimal\" autocomplete=\"off\" spellcheck=\"false\" placeholder=\"e.g. 16\" min=\"0.1\" value=\"16\"\/><div class=\"unit\" id=\"calc-unit-3\">px<\/div><small id=\"calc-info-3\">Taille de police de l&#039;\u00e9l\u00e9ment &lt;html&gt;. Les navigateurs utilisent 16 px par d\u00e9faut ; elle est n\u00e9cessaire pour le rem.<\/small><\/div><div class=\"field has-term\" id=\"input-4\"><label for=\"field-4\">Taille de police du parent<\/label><div class=\"term\">em<\/div>  <div class=\"absolute bottom-0 left-16 top-8 w-2 h-0.5 bg-blue-500\"><\/div><input type=\"text\" name=\"taille_de_police_du_parent\" id=\"field-4\" aria-describedby=\"calc-unit-4 calc-info-4\" data-number inputmode=\"decimal\" autocomplete=\"off\" spellcheck=\"false\" placeholder=\"e.g. 16\" min=\"0.1\" value=\"16\"\/><div class=\"unit\" id=\"calc-unit-4\">px<\/div><small id=\"calc-info-4\">Taille de police calcul\u00e9e de l&#039;\u00e9l\u00e9ment parent ; elle est n\u00e9cessaire pour em et %.<\/small><\/div><div class=\"field has-term\" id=\"input-5\"><label for=\"field-5\">Largeur du viewport<\/label><div class=\"term\">vw<\/div>  <div class=\"absolute bottom-0 left-16 top-8 w-2 h-0.5 bg-blue-500\"><\/div><input type=\"text\" name=\"largeur_du_viewport\" id=\"field-5\" aria-describedby=\"calc-unit-5 calc-info-5\" data-number inputmode=\"decimal\" autocomplete=\"off\" spellcheck=\"false\" placeholder=\"e.g. 1920\" min=\"1\" value=\"1920\"\/><div class=\"unit\" id=\"calc-unit-5\">px<\/div><small id=\"calc-info-5\">Largeur du viewport du navigateur ; elle est n\u00e9cessaire pour vw.<\/small><\/div><div class=\"field has-term\" id=\"input-6\"><label for=\"field-6\">Hauteur du viewport<\/label><div class=\"term\">vh<\/div>  <div class=\"absolute bottom-0 left-16 top-8 w-2 h-0.5 bg-blue-500\"><\/div><input type=\"text\" name=\"hauteur_du_viewport\" id=\"field-6\" aria-describedby=\"calc-unit-6 calc-info-6\" data-number inputmode=\"decimal\" autocomplete=\"off\" spellcheck=\"false\" placeholder=\"e.g. 1080\" min=\"1\" value=\"1080\"\/><div class=\"unit\" id=\"calc-unit-6\">px<\/div><small id=\"calc-info-6\">Hauteur du viewport du navigateur ; elle est n\u00e9cessaire pour vh.<\/small><\/div><\/fieldset><div class=\"buttons\"><button type=\"submit\" data-text=\"Recalculer\" id=\"calculate-button\" data-post=\"5722\">Calculer<\/button><button type=\"reset\">R\u00e9initialiser<\/button><\/div><div class=\"field is-checkbox hidden!\" id=\"field-auto-calc\"><input type=\"checkbox\" id=\"auto-calc\"><label for=\"auto-calc\">Calculer automatiquement<\/label><small>Si activ\u00e9, le r\u00e9sultat se met \u00e0 jour automatiquement d\u00e8s que vous modifiez une valeur.<\/small><\/div><div class=\"fieldset-result is-hidden\" aria-labelledby=\"result-title\" aria-live=\"polite\" role=\"region\"> <h3 class=\"result-title bg-gradient-to-r from-primary-50 to-gray-50 dark:from-primary-900 dark:to-gray-800\" id=\"result-title\"><span class=\"icon icon-s-pulse\" aria-hidden=\"true\"><\/span> Valeurs converties<\/h3><div class=\"result-box\"><div class=\"field-result\" id=\"output-1\"><span class=\"field-title\"><span>Pixels<\/span><span class=\"result-term\">px<\/span><\/span><span class=\"field-value\" id=\"result-1\" data-unit=\"px\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copier le r\u00e9sultat\" aria-label=\"Copier le r\u00e9sultat\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-2\"><span class=\"field-title\"><span>Ems racine<\/span><span class=\"result-term\">rem<\/span><\/span><span class=\"field-value\" id=\"result-2\" data-unit=\"rem\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copier le r\u00e9sultat\" aria-label=\"Copier le r\u00e9sultat\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-3\"><span class=\"field-title\"><span>Ems (parent)<\/span><span class=\"result-term\">em<\/span><\/span><span class=\"field-value\" id=\"result-3\" data-unit=\"em\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copier le r\u00e9sultat\" aria-label=\"Copier le r\u00e9sultat\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-4\"><span class=\"field-title\"><span>Unit\u00e9s de largeur du viewport<\/span><span class=\"result-term\">vw<\/span><\/span><span class=\"field-value\" id=\"result-4\" data-unit=\"vw\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copier le r\u00e9sultat\" aria-label=\"Copier le r\u00e9sultat\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-5\"><span class=\"field-title\"><span>Unit\u00e9s de hauteur du viewport<\/span><span class=\"result-term\">vh<\/span><\/span><span class=\"field-value\" id=\"result-5\" data-unit=\"vh\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copier le r\u00e9sultat\" aria-label=\"Copier le r\u00e9sultat\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-6\"><span class=\"field-title\"><span>Points<\/span><span class=\"result-term\">pt<\/span><\/span><span class=\"field-value\" id=\"result-6\" data-unit=\"pt\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copier le r\u00e9sultat\" aria-label=\"Copier le r\u00e9sultat\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result is-column\" id=\"output-7\"><span class=\"field-title\"><span>Base de conversion<\/span><\/span><span class=\"field-value\" id=\"result-7\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copier le r\u00e9sultat\" aria-label=\"Copier le r\u00e9sultat\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><\/div><div class=\"result-actions\"><button type=\"button\" class=\"copy-link\"><svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"\/><path d=\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"\/><\/svg><span class=\"copy-link__text\">Copier le lien vers ce calcul<\/span><\/button><span class=\"sr-only\" role=\"status\" id=\"copy-link-status\"><\/span><\/div><\/div><a href=\"#respond\" class=\"hidden transition-opacity duration-300 opacity-0 w-50 text-sm justify-center items-center gap-2 px-4 py-2 rounded bg-gray-200 text-gray-700 hover:bg-gray-300\" id=\"leave-comment\"><span class=\"icon icon-comments\" aria-hidden=\"true\"><\/span>Laisser un commentaire<\/a><\/form><\/section><section id=\"calc-reactions\" class=\"not-prose hidden my-12 bg-gradient-to-r from-primary-50 to-gray-50 border border-indigo-100 rounded-xl px-6 py-4 shadow-sm\" data-post=\"5722\" aria-live=\"polite\" aria-labelledby=\"calc-reactions-title\"><p id=\"calc-reactions-title\" class=\"text-sm text-gray-500 text-center mb-2\">Que pensez-vous de ce r\u00e9sultat\u00a0?<\/p><div role=\"group\" aria-labelledby=\"calc-reactions-title\" class=\"grid grid-cols-3 sm:flex sm:flex-row sm:justify-around gap-4 sm:items-center sm:flex-wrap\"><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"like\"><span class=\"reaction-count\" data-reaction-count=\"like\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\ude00 <\/span><span class=\"reaction-description font-medium\">J\u2019aime <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"helpful\"><span class=\"reaction-count\" data-reaction-count=\"helpful\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\udca1 <\/span><span class=\"reaction-description font-medium\">Utile <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"confused\"><span class=\"reaction-count\" data-reaction-count=\"confused\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\ude15 <\/span><span class=\"reaction-description font-medium\">Confus <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"disappointed\"><span class=\"reaction-count\" data-reaction-count=\"disappointed\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\ude1e <\/span><span class=\"reaction-description font-medium\">D\u00e9\u00e7u <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"inaccurate\"><span class=\"reaction-count\" data-reaction-count=\"inaccurate\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\u274c <\/span><span class=\"reaction-description font-medium\">Inexact <\/span><\/button><\/div><div id=\"reaction-message\" class=\"hidden mt-8 rounded-md border border-primary-100 bg-white\/50 backdrop-blur-sm px-4 py-2 text-sm text-center shadow-sm\"><\/div><\/section><div class=\"calcdash-ad not-prose calcdash-ad--calc_result calcdash-ad--in-article\"><ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-1721569815777345\" data-ad-slot=\"6317458308\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\"><\/ins><script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script><\/div>\n<style id=\"wpcoderpro-inline-1\">.formula-box {\r\n\tborder-bottom: none !important;\r\n}<\/style><section class=\"formula-box\" aria-labelledby=\"formula-title\">\r\n\t<div id=\"formula-title\" class=\"not-prose font-display mb-4\"><span class=\"icon icon-formula\" aria-hidden=\"true\"><\/span><h2>Formule des unit\u00e9s CSS<\/h2><\/div>\r\n\t<figure class=\"not-prose formula\">\r\n\t\t<figcaption class=\"formula-title\">Formule<\/figcaption>\r\n\t\t<div class=\"text-base text-gray-800\" id=\"formula\">\n\\[ px = v \\times f(\\text{unit}) \\]\n\\[ x_{\\text{target}} = \\frac{px}{f(\\text{target unit})} \\]\n<\/div>\r\n\t<\/figure>\r\n\t<\/p>\n<p><strong>O\u00f9 :<\/strong><\/p>\n<ul>\n<li>\\(v\\) \u2014 la longueur saisie, dans son unit\u00e9 d'origine ;<\/li>\n<li>\\(f(\\text{unit})\\) \u2014 le nombre de pixels que vaut une unit\u00e9 de ce type :<\/li>\n<li>\\(px\\) : 1 &nbsp;\\(rem\\) : taille de police racine &nbsp;\\(em\\) : taille de police du parent &nbsp;\\(vw\\) : largeur de la fen\u00eatre \\(\/ 100\\) &nbsp;\\(vh\\) : hauteur de la fen\u00eatre \\(\/ 100\\) &nbsp;\\(pt\\) : \\(96\/72 = 1.3333\\) &nbsp;\\(\\%\\) : taille de police du parent \\(\/ 100\\)<\/li>\n<\/ul>\n<p>Le calculateur commence par convertir la valeur saisie en pixels, puis la divise par le facteur en pixels de chaque unit\u00e9 cible. Cette approche en deux \u00e9tapes garantit que les sept r\u00e9sultats sont parfaitement coh\u00e9rents entre eux.<\/p>\n<p>\r\n<\/section>\n<style id=\"wpcoderpro-inline-2\">.calculation-box {\r\n\tborder-bottom: none !important;\r\n}<\/style><section id=\"calculation\" class=\"calculation-box\" aria-labelledby=\"calculation-title\">\r\n\t<div id=\"calculation-title\" class=\"not-prose font-display\"><span class=\"icon icon-unordered-list\" aria-hidden=\"true\"><\/span><h2>Unit\u00e9s CSS \u2013 Exemple de calcul<\/h2><\/div>\r\n\r\n<\/p>\n<p><strong>Exemple :<\/strong> convertir <code>24px<\/code> en rem, em, vw, vh et pt, avec une taille de police racine et parente de 16px et une fen\u00eatre de 1920\u00d71080 (les valeurs par d\u00e9faut du calculateur).<\/p>\n<p>\\[ px = 24 \\times 1 = 24 \\]<\/p>\n<p>\\[ rem = \\frac{24}{16} = 1.5 \\quad em = \\frac{24}{16} = 1.5 \\]<\/p>\n<p>\\[ vw = \\frac{24}{1920\/100} = \\frac{24}{19.2} = 1.25 \\quad vh = \\frac{24}{1080\/100} \\approx 2.2222 \\]<\/p>\n<p>\\[ pt = 24 \\times \\frac{72}{96} = 18 \\]<\/p>\n<p><strong>R\u00e9sultat :<\/strong> 24px = 1.5rem = 1.5em = 1.25vw = 2.2222vh = 18pt.<\/p>\n<p>\n\r\n<\/section>\n<h2>Comment utiliser le convertisseur d'unit\u00e9s CSS<\/h2>\n<ol>\n<li>Saisissez la longueur dans le champ <strong>Valeur<\/strong> \u2014 par exemple 24. Les valeurs n\u00e9gatives fonctionnent aussi, ce qui est utile pour les marges n\u00e9gatives.<\/li>\n<li>S\u00e9lectionnez l'unit\u00e9 de cette valeur dans le menu d\u00e9roulant <strong>Unit\u00e9 CSS<\/strong> (px, rem, em, vw, vh, pt ou %).<\/li>\n<li>D\u00e9finissez la <strong>Taille de police racine<\/strong> \u2014 la taille de police de l'\u00e9l\u00e9ment <code>&lt;html&gt;<\/code>. Par d\u00e9faut, les navigateurs utilisent 16px.<\/li>\n<li>D\u00e9finissez la <strong>Taille de police du parent<\/strong> \u2014 la taille de police calcul\u00e9e de l'\u00e9l\u00e9ment parent, indispensable pour les conversions en em et en %.<\/li>\n<li>Saisissez la <strong>Largeur<\/strong> et la <strong>Hauteur de la fen\u00eatre<\/strong> (viewport) du navigateur en pixels ; elles d\u00e9terminent les r\u00e9sultats en vw et en vh.<\/li>\n<li>Lisez tous les \u00e9quivalents en une seule fois sous <strong>Valeurs converties<\/strong>, accompagn\u00e9s de la base de conversion, qui indique combien de pixels vaut chaque unit\u00e9 dans votre configuration.<\/li>\n<\/ol>\n<h2>Que sont les unit\u00e9s CSS et pourquoi sont-elles importantes ?<\/h2>\n<p>Les longueurs CSS se r\u00e9partissent en deux familles. Les unit\u00e9s <em>absolues<\/em>, comme px et pt, ont une taille fixe : la sp\u00e9cification CSS d\u00e9finit le pixel de r\u00e9f\u00e9rence de sorte que 1in = 96px = 72pt. Les unit\u00e9s <em>relatives<\/em> d\u00e9pendent du contexte : le rem se r\u00e9f\u00e8re \u00e0 la taille de police de l'\u00e9l\u00e9ment racine, l'em \u00e0 celle du parent, vw et vh \u00e0 1 % de la largeur ou de la hauteur de la fen\u00eatre, et % (pour font-size) \u00e0 la taille de police du parent.<\/p>\n<p>Le choix de l'unit\u00e9 d\u00e9termine le comportement d'une mise en page. Les valeurs en px restent constantes quelles que soient les pr\u00e9f\u00e9rences de l'utilisateur : pr\u00e9visibles pour les bordures et les d\u00e9tails fins, mais rigides pour la typographie. Les valeurs en rem suivent la taille de police racine : si l'utilisateur agrandit le texte de base du navigateur, tout ce qui est dimensionn\u00e9 en rem grandit proportionnellement \u2014 une exigence essentielle en mati\u00e8re d'accessibilit\u00e9. Les valeurs en em se cumulent \u00e0 travers les \u00e9l\u00e9ments imbriqu\u00e9s, ce qui peut donner des r\u00e9sultats surprenants dans un balisage profond.<\/p>\n<p>Les unit\u00e9s li\u00e9es \u00e0 la fen\u00eatre rendent la typographie et l'espacement sensibles \u00e0 la taille de celle-ci. Une largeur fix\u00e9e \u00e0 <code>50vw<\/code> occupe toujours la moiti\u00e9 de l'\u00e9cran ; c'est pourquoi les sections hero et la typographie fluide combinent souvent vw et rem avec <code>clamp()<\/code>. Comme vw et vh changent \u00e0 chaque redimensionnement, leur conversion en px n'a de sens que pour une taille de fen\u00eatre pr\u00e9cise \u2014 celle que vous saisissez dans le calculateur.<\/p>\n<p>L'interpr\u00e9tation des r\u00e9sultats est simple : chaque valeur correspond \u00e0 la m\u00eame longueur physique exprim\u00e9e dans une unit\u00e9 diff\u00e9rente. Si vous migrez un design system de px vers rem, la colonne rem vous donne la valeur du token \u00e0 \u00e9crire ; si vous imprimez ou comparez avec des outils de conception travaillant en points, la colonne pt fournit l'\u00e9quivalent direct.<\/p>\n<h2>Hypoth\u00e8ses, limites et conseils pratiques<\/h2>\n<ul>\n<li>Le convertisseur part du pixel de r\u00e9f\u00e9rence standard du CSS : <code>1in = 96px = 72pt<\/code>. Le rendu physique (impression) peut l\u00e9g\u00e8rement diff\u00e9rer selon le p\u00e9riph\u00e9rique.<\/li>\n<li>Le pourcent est trait\u00e9 comme relatif \u00e0 la taille de police du parent, ce qui est exact pour <code>font-size<\/code>. Pour <code>width<\/code>, <code>height<\/code>, <code>margin<\/code> et <code>padding<\/code>, le pourcent se r\u00e9f\u00e8re aux dimensions du parent ; ces cas demandent donc une autre valeur de r\u00e9f\u00e9rence.<\/li>\n<li>L'em est relatif \u00e0 la taille de police <em>du parent<\/em>. Lorsqu'il est utilis\u00e9 dans une propri\u00e9t\u00e9 comme <code>line-height<\/code> ou <code>padding<\/code> sur l'\u00e9l\u00e9ment lui-m\u00eame, l'em se r\u00e9f\u00e8re alors \u00e0 la taille de police de cet \u00e9l\u00e9ment \u2014 ajustez le champ Taille de police du parent en cons\u00e9quence.<\/li>\n<li>Les r\u00e9sultats en vw et vh ne sont valables que pour les dimensions de fen\u00eatre que vous avez saisies. Testez plusieurs tailles (par exemple 1920\u00d71080, 1366\u00d7768, 390\u00d7844) pour voir comment les valeurs converties \u00e9voluent.<\/li>\n<li>Les navigateurs appliquent une taille de police minimale dans certaines configurations, ce qui peut faire appara\u00eetre un tr\u00e8s petit texte bas\u00e9 sur rem ou em plus grand que ne le pr\u00e9voit le calcul.<\/li>\n<li>Une r\u00e8gle utile \u00e0 retenir : avec la taille de police racine par d\u00e9faut de 16px, 1rem = 16px, donc <em>px \u00f7 16 = rem<\/em>. Si vous fixez la racine \u00e0 10px, les valeurs en rem correspondent \u00e0 px \u00f7 10 \u2014 c'est pourquoi beaucoup de design systems adoptent une racine de 10px.<\/li>\n<\/ul>\n<p>Si vous devez \u00e9galement convertir des unit\u00e9s de mesure ou d'ing\u00e9nierie, essayez notre <a href=\"https:\/\/wpcalc.com\/en\/converters\/power-unit-converter\/\">Convertisseur d'unit\u00e9s de puissance<\/a>, le <a href=\"https:\/\/wpcalc.com\/fr\/convertisseurs\/convertisseur-debit-transfert-donnees-mbps-mb-s\/\">Convertisseur de d\u00e9bit de donn\u00e9es<\/a> ou encore le <a href=\"https:\/\/wpcalc.com\/fr\/convertisseurs\/convertisseur-vitesse\/\">Convertisseur d'unit\u00e9s de vitesse<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Convertissez une longueur CSS entre px, rem, em, vw, vh, pt et pourcent. Saisissez la valeur, choisissez son unit\u00e9, indiquez la taille de police racine et parente ainsi que les dimensions de la fen\u00eatre, et obtenez tous les \u00e9quivalents en une seule fois.<\/p>\n","protected":false},"author":3168,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[15],"tags":[39],"class_list":["post-5722","post","type-post","status-publish","format-standard","hentry","category-convertisseurs","tag-autres-unites"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpcalc.com\/fr\/wp-json\/wp\/v2\/posts\/5722","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpcalc.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpcalc.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpcalc.com\/fr\/wp-json\/wp\/v2\/users\/3168"}],"replies":[{"embeddable":true,"href":"https:\/\/wpcalc.com\/fr\/wp-json\/wp\/v2\/comments?post=5722"}],"version-history":[{"count":0,"href":"https:\/\/wpcalc.com\/fr\/wp-json\/wp\/v2\/posts\/5722\/revisions"}],"wp:attachment":[{"href":"https:\/\/wpcalc.com\/fr\/wp-json\/wp\/v2\/media?parent=5722"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpcalc.com\/fr\/wp-json\/wp\/v2\/categories?post=5722"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpcalc.com\/fr\/wp-json\/wp\/v2\/tags?post=5722"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}