{"id":2086,"date":"2026-10-14T18:48:22","date_gmt":"2026-10-14T17:48:22","guid":{"rendered":"https:\/\/wpcalc.com\/pt\/conversores\/conversor-de-unidades-css\/"},"modified":"2026-10-14T18:48:22","modified_gmt":"2026-10-14T17:48:22","slug":"conversor-de-unidades-css","status":"publish","type":"post","link":"https:\/\/wpcalc.com\/pt\/conversores\/conversor-de-unidades-css\/","title":{"rendered":"Conversor de unidades 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\">Converter entre px, rem, em, vw e vh<\/h2><\/div><div class=\"calcdash-favorite group\">\n  <button type=\"button\" class=\"favorite\" id=\"favorite\" data-favorite-id=\"2086\" data-favorite-title=\"Unidades CSS\" data-favorite-url=\"https:\/\/wpcalc.com\/pt\/conversores\/conversor-de-unidades-css\/\" data-favorite-excerpt=\"Converta um comprimento CSS entre px, rem, em, vw, vh, pt e porcentagem. Digite o valor, escolha a unidade, informe o tamanho da fonte do elemento raiz e do elemento pai, al\u00e9m das dimens\u00f5es da viewport, e receba todos os equivalentes de uma vez.\" aria-label=\"Adicionar aos favoritos\" 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\/pt\/conversores\/conversor-de-unidades-css\/\" method=\"POST\" class=\"calculator\" id=\"calculator-2086\" data-post=\"2086\"><fieldset class=\"fieldset-input is-1\"><legend class=\"sr-only\">Campos de entrada<\/legend><div class=\"field has-term\" id=\"input-1\"><label for=\"field-1\">Valor<\/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=\"valor\" id=\"field-1\" aria-describedby=\"calc-info-1\" placeholder=\"e.g. 24\" step=\"any\" value=\"24\"\/><small id=\"calc-info-1\">O comprimento que voc\u00ea quer converter. S\u00e3o permitidos valores negativos (por exemplo, margens negativas).<\/small><\/div><div class=\"field\" id=\"input-2\"><label for=\"field-2\">Unidade CSS<\/label><div class=\"grid grid-cols-1\"><select id=\"field-2\" name=\"unidade_css\"><option value=\"px\" selected>px (pixels)<\/option><option value=\"rem\">rem (em da raiz)<\/option><option value=\"em\">em (relativo ao tamanho da fonte do elemento pai)<\/option><option value=\"vw\">vw (largura da viewport)<\/option><option value=\"vh\">vh (altura da viewport)<\/option><option value=\"pt\">pt (pontos)<\/option><option value=\"%\">% (porcentagem do tamanho da fonte do elemento pai)<\/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\">Tamanho da fonte raiz<\/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=\"tamanho_da_fonte_raiz\" 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\">Tamanho da fonte do elemento &lt;html&gt;. O padr\u00e3o dos navegadores \u00e9 16px; necess\u00e1rio para rem.<\/small><\/div><div class=\"field has-term\" id=\"input-4\"><label for=\"field-4\">Tamanho da fonte do elemento pai<\/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=\"tamanho_da_fonte_do_elemento_pai\" 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\">Tamanho da fonte calculado do elemento pai; necess\u00e1rio para em e %.<\/small><\/div><div class=\"field has-term\" id=\"input-5\"><label for=\"field-5\">Largura da 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=\"largura_da_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\">Largura da viewport do navegador; necess\u00e1ria para vw.<\/small><\/div><div class=\"field has-term\" id=\"input-6\"><label for=\"field-6\">Altura da 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=\"altura_da_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\">Altura da viewport do navegador; necess\u00e1ria para vh.<\/small><\/div><\/fieldset><div class=\"buttons\"><button type=\"submit\" data-text=\"Recalcular\" id=\"calculate-button\" data-post=\"2086\">Calcular<\/button><button type=\"reset\">Redefinir<\/button><\/div><div class=\"field is-checkbox hidden!\" id=\"field-auto-calc\"><input type=\"checkbox\" id=\"auto-calc\"><label for=\"auto-calc\">Calcular automaticamente<\/label><small>Se ativado, o resultado \u00e9 atualizado automaticamente quando voc\u00ea altera qualquer valor.<\/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> Valores convertidos<\/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=\"Copiar resultado\" aria-label=\"Copiar resultado\"><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>Rems<\/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=\"Copiar resultado\" aria-label=\"Copiar resultado\"><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 (elemento pai)<\/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=\"Copiar resultado\" aria-label=\"Copiar resultado\"><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>Unidades de largura da 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=\"Copiar resultado\" aria-label=\"Copiar resultado\"><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>Unidades de altura da 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=\"Copiar resultado\" aria-label=\"Copiar resultado\"><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>Pontos<\/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=\"Copiar resultado\" aria-label=\"Copiar resultado\"><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 da convers\u00e3o<\/span><\/span><span class=\"field-value\" id=\"result-7\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copiar resultado\" aria-label=\"Copiar resultado\"><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\">Copiar link para este c\u00e1lculo<\/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>Deixar um coment\u00e1rio<\/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=\"2086\" aria-live=\"polite\" aria-labelledby=\"calc-reactions-title\"><p id=\"calc-reactions-title\" class=\"text-sm text-gray-500 text-center mb-2\">O que voc\u00ea achou deste resultado?<\/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\">Curti <\/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\">\u00datil <\/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\">Confuso <\/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\">Decepcionado <\/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\">Impreciso <\/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>F\u00f3rmula das unidades CSS<\/h2><\/div>\r\n\t<figure class=\"not-prose formula\">\r\n\t\t<figcaption class=\"formula-title\">F\u00f3rmula<\/figcaption>\r\n\t\t<div class=\"text-base text-gray-800\" id=\"formula\">\n\\[ px = v \\times f(\\text{unidade}) \\]\n\\[ x_{\\text{alvo}} = \\frac{px}{f(\\text{unidade alvo})} \\]\n<\/div>\r\n\t<\/figure>\r\n\t<\/p>\n<p><strong>Onde:<\/strong><\/p>\n<ul>\n<li>\\(v\\) \u2014 o comprimento que voc\u00ea digitou, em sua unidade original<\/li>\n<li>\\(f(\\text{unidade})\\) \u2014 quantos pixels vale uma unidade daquele tipo:<\/li>\n<li>\\(px\\): 1 &nbsp;\\(rem\\): tamanho da fonte raiz &nbsp;\\(em\\): tamanho da fonte do pai &nbsp;\\(vw\\): largura da viewport \\(\/ 100\\) &nbsp;\\(vh\\): altura da viewport \\(\/ 100\\) &nbsp;\\(pt\\): \\(96\/72 = 1.3333\\) &nbsp;\\(%\\): tamanho da fonte do pai \\(\/ 100\\)<\/li>\n<\/ul>\n<p>Primeiro, a calculadora converte o valor digitado para pixels e depois divide pelo fator em pixels de cada unidade de destino. Essa abordagem em duas etapas garante que os sete resultados sejam coerentes entre si.<\/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>Unidades CSS \u2013 exemplo de c\u00e1lculo<\/h2><\/div>\r\n\r\n<\/p>\n<p><strong>Exemplo:<\/strong> converter <code>24px<\/code> para rem, em, vw, vh e pt, com tamanho de fonte raiz e do pai de 16px e viewport de 1920\u00d71080 (os valores padr\u00e3o da calculadora).<\/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>Resultado:<\/strong> 24px = 1.5rem = 1.5em = 1.25vw = 2.2222vh = 18pt.<\/p>\n<p>\n\r\n<\/section>\n<h2>Como usar o conversor de unidades CSS<\/h2>\n<ol>\n<li>Digite o comprimento no campo <strong>Valor<\/strong> \u2014 por exemplo, 24. Valores negativos tamb\u00e9m funcionam, o que \u00e9 \u00fatil para margens negativas.<\/li>\n<li>Selecione a unidade desse valor na lista suspensa <strong>Unidade CSS<\/strong> (px, rem, em, vw, vh, pt ou %).<\/li>\n<li>Defina o <strong>tamanho da fonte raiz<\/strong> \u2014 o tamanho da fonte do elemento <code>&lt;html&gt;<\/code>. Os navegadores usam 16px como padr\u00e3o.<\/li>\n<li>Defina o <strong>tamanho da fonte do pai<\/strong> \u2014 o tamanho de fonte calculado do elemento pai, necess\u00e1rio para as convers\u00f5es de em e %.<\/li>\n<li>Informe a <strong>largura<\/strong> e a <strong>altura da viewport<\/strong> da janela do navegador, em pixels; s\u00e3o elas que determinam os resultados em vw e vh.<\/li>\n<li>Leia todos os equivalentes de uma vez em <strong>Valores convertidos<\/strong>, junto com a base de convers\u00e3o, que mostra quantos pixels cada unidade vale na sua configura\u00e7\u00e3o.<\/li>\n<\/ol>\n<h2>O que s\u00e3o unidades CSS e por que elas importam?<\/h2>\n<p>Os comprimentos em CSS se dividem em duas fam\u00edlias. As unidades <em>absolutas<\/em>, como px e pt, t\u00eam tamanho fixo: a especifica\u00e7\u00e3o do CSS define o pixel de refer\u00eancia de modo que 1in = 96px = 72pt. J\u00e1 as unidades <em>relativas<\/em> dependem do contexto: o rem se refere ao tamanho da fonte do elemento raiz; o em, ao tamanho da fonte do pai; vw e vh, a 1% da largura ou da altura da viewport; e % (para font-size), ao tamanho da fonte do pai.<\/p>\n<p>A escolha da unidade define o comportamento do layout. Valores em px permanecem constantes independentemente das prefer\u00eancias do usu\u00e1rio, o que os torna previs\u00edveis para bordas e detalhes finos, mas r\u00edgidos para tipografia. Valores em rem escalam junto com o tamanho da fonte raiz: se o usu\u00e1rio aumenta o texto base do navegador, tudo que estiver dimensionado em rem cresce proporcionalmente \u2014 um requisito essencial de acessibilidade. Valores em em se acumulam em elementos aninhados, o que pode gerar resultados surpreendentes em marca\u00e7\u00f5es profundas.<\/p>\n<p>As unidades de viewport fazem a tipografia e o espa\u00e7amento reagirem ao tamanho da janela. Uma largura definida como <code>50vw<\/code> sempre ocupa metade da tela, por isso se\u00e7\u00f5es hero e tipografia fluida costumam combinar vw com rem usando <code>clamp()<\/code>. Como vw e vh mudam a cada redimensionamento, convert\u00ea-los para px s\u00f3 faz sentido para um tamanho espec\u00edfico de viewport \u2014 justamente aquele que voc\u00ea informa na calculadora.<\/p>\n<p>Interpretar o resultado \u00e9 simples: cada valor \u00e9 o mesmo comprimento f\u00edsico expresso em uma unidade diferente. Se voc\u00ea est\u00e1 migrando um design system de px para rem, a coluna de rem indica o valor do token a escrever; se voc\u00ea vai imprimir ou comparar com ferramentas de design que usam pontos, a coluna de pt traz o equivalente direto.<\/p>\n<h2>Premissas, limita\u00e7\u00f5es e dicas pr\u00e1ticas<\/h2>\n<ul>\n<li>O conversor assume o pixel de refer\u00eancia padr\u00e3o do CSS: <code>1in = 96px = 72pt<\/code>. A sa\u00edda f\u00edsica (impress\u00e3o) pode variar um pouco dependendo do dispositivo.<\/li>\n<li>A porcentagem \u00e9 tratada como relativa ao tamanho da fonte do pai, o que \u00e9 correto para <code>font-size<\/code>. Para <code>width<\/code>, <code>height<\/code>, <code>margin<\/code> e <code>padding<\/code>, a porcentagem se refere \u00e0s dimens\u00f5es do pai, e nesses casos \u00e9 preciso usar outro valor de refer\u00eancia.<\/li>\n<li>O em \u00e9 relativo ao tamanho da fonte <em>do pai<\/em>. Quando usado em uma propriedade como <code>line-height<\/code> ou <code>padding<\/code> do pr\u00f3prio elemento, o em passa a se referir ao tamanho da fonte desse elemento \u2014 ajuste o campo de tamanho da fonte do pai de acordo.<\/li>\n<li>Os resultados em vw e vh s\u00f3 valem para as dimens\u00f5es de viewport que voc\u00ea informou. Teste alguns tamanhos (por exemplo, 1920\u00d71080, 1366\u00d7768, 390\u00d7844) para ver como os valores convertidos mudam.<\/li>\n<li>Os navegadores aplicam um tamanho m\u00ednimo de fonte em certas configura\u00e7\u00f5es, o que pode fazer textos muito pequenos baseados em rem ou em serem exibidos maiores do que o c\u00e1lculo prev\u00ea.<\/li>\n<li>Uma regra pr\u00e1tica: com o tamanho de fonte raiz padr\u00e3o de 16px, 1rem = 16px, ou seja, <em>px \u00f7 16 = rem<\/em>. Se voc\u00ea mudar a raiz para 10px, os valores em rem passam a corresponder a px \u00f7 10 na raz\u00e3o de 1:1 \u2014 \u00e9 por isso que muitos design systems usam uma raiz de 10px.<\/li>\n<\/ul>\n<p>Se voc\u00ea tamb\u00e9m precisar converter entre unidades de medida ou de engenharia, experimente nosso <a href=\"https:\/\/wpcalc.com\/en\/converters\/power-unit-converter\/\">conversor de unidades de pot\u00eancia<\/a>, o <a href=\"https:\/\/wpcalc.com\/pt\/conversores\/conversor-taxa-de-transferencia-de-dados-mbps-para-mb-s\/\">conversor de taxa de transfer\u00eancia de dados<\/a> ou o <a href=\"https:\/\/wpcalc.com\/pt\/conversores\/conversor-de-velocidade\/\">conversor de unidades de velocidade<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Converta um comprimento CSS entre px, rem, em, vw, vh, pt e porcentagem. Digite o valor, escolha a unidade, informe o tamanho da fonte do elemento raiz e do elemento pai, al\u00e9m das dimens\u00f5es da viewport, e receba todos os equivalentes de uma vez.<\/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":[4],"tags":[59],"class_list":["post-2086","post","type-post","status-publish","format-standard","hentry","category-conversores","tag-outras-unidades"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpcalc.com\/pt\/wp-json\/wp\/v2\/posts\/2086","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpcalc.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpcalc.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpcalc.com\/pt\/wp-json\/wp\/v2\/users\/3168"}],"replies":[{"embeddable":true,"href":"https:\/\/wpcalc.com\/pt\/wp-json\/wp\/v2\/comments?post=2086"}],"version-history":[{"count":0,"href":"https:\/\/wpcalc.com\/pt\/wp-json\/wp\/v2\/posts\/2086\/revisions"}],"wp:attachment":[{"href":"https:\/\/wpcalc.com\/pt\/wp-json\/wp\/v2\/media?parent=2086"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpcalc.com\/pt\/wp-json\/wp\/v2\/categories?post=2086"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpcalc.com\/pt\/wp-json\/wp\/v2\/tags?post=2086"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}