Conversor de unidades CSS (px, rem, em, vw, pt…)
Converta medidas CSS entre px, rem, em, %, vw, vh, vmin, vmax, pt, pc, in, cm, mm e Q com o seu próprio tamanho de fonte raiz e viewport. Grátis e instantâneo.
1remAs unidades absolutas seguem o CSS: 1in = 96px = 2,54cm = 72pt = 6pc, 1Q = 0,25mm. rem usa o tamanho da fonte raiz; em e % usam o do elemento pai (como em font-size); vw/vh/vmin/vmax usam a viewport. Resultados arredondados a 4 casas decimais.
O que é Conversor de unidades CSS?
Converta uma medida CSS entre unidades absolutas (px, pt, pc, in, cm, mm, Q) e relativas (rem, em, %, vw, vh, vmin, vmax). Defina o tamanho da fonte raiz, o tamanho da fonte do pai e o tamanho da viewport para que as unidades relativas sejam calculadas no seu contexto real; todas as unidades aparecem de uma vez.
Como usar Conversor de unidades CSS
- Informe o Valor e escolha as unidades De e Para.
- Ajuste o Tamanho da fonte raiz (para rem), o Tamanho da fonte do pai (para em e %) e a largura e a altura da viewport.
- Copie o resultado principal ou clique em qualquer card de unidade para copiar aquele valor.
Exemplo
24px (root 16px)
1.5rem · 18pt · 1.25vw (1920px viewport)
Quando usar Conversor de unidades CSS
Use-o ao transformar especificações de design em px em CSS baseado em rem, ou para conferir o que um valor em vw significa em uma determinada tela. % só equivale a em no font-size; em width ou padding, % se refere ao bloco contêiner, que esta ferramenta não tem como saber.
Como funciona Conversor de unidades CSS
Tudo é convertido passando por pixels CSS. As unidades absolutas usam as proporções fixas do CSS: 1in = 96px = 2,54cm = 25,4mm = 72pt = 6pc, 1Q = 0,25mm. O rem multiplica pelo tamanho da fonte raiz, o em pelo tamanho da fonte do pai, % é uma porcentagem do tamanho da fonte do pai (a interpretação de font-size), vw/vh são 1% da largura/altura da viewport e vmin/vmax usam o lado menor/maior. Os resultados são arredondados para 4 casas decimais.
Casos de Uso Comuns
- Converter em rem os tamanhos em px de um design system
- Ver o tamanho de 5vw em um notebook de 1440px de largura
- Transformar medidas de impressão em pt ou mm em px CSS
- Calcular valores em em para um componente com fonte do pai de 20px
Perguntas Frequentes
Por que 1rem são 16px?
Os navegadores usam 16px como tamanho padrão da fonte raiz. Se o seu CSS define html { font-size: 62.5% }, informe 10 como tamanho da fonte raiz.
Qual a diferença entre rem e em?
O rem é relativo ao tamanho da fonte raiz (html); o em é relativo ao tamanho da fonte do elemento pai, então se acumula quando aninhado.
cm e in são tamanhos físicos na tela?
Não. O CSS fixa 1in = 96px, então na maioria das telas um centímetro CSS não é exatamente um centímetro real. Eles são precisos na impressão.