Conversor de Unidades CSS
Insira um valor uma vez e veja-o em todas as unidades de comprimento do CSS — px, rem, em, pt, %, vw e vh — com o tamanho da fonte raiz, o tamanho da fonte do pai e o viewport que você escolher. Copie qualquer resultado com um toque.
Conversões comuns
Convertido para todas as unidades
rem, em e % dependem do tamanho da fonte; vw e vh dependem do viewport. px e pt têm uma proporção fixa (1pt = 1,3333px). Ajuste o contexto acima se os seus padrões forem diferentes.
Referência px para rem (raiz = 16px)
| px | rem | pt |
|---|---|---|
| 8px | 0.5rem | 6pt |
| 10px | 0.625rem | 7.5pt |
| 12px | 0.75rem | 9pt |
| 14px | 0.875rem | 10.5pt |
| 16px | 1rem | 12pt |
| 18px | 1.125rem | 13.5pt |
| 20px | 1.25rem | 15pt |
| 24px | 1.5rem | 18pt |
| 32px | 2rem | 24pt |
| 48px | 3rem | 36pt |
Com o tamanho de fonte raiz padrão de 16px, divida os pixels por 16 para obter rem e multiplique por 0,75 para obter pontos.
Sobre o Conversor de Unidades CSS
O CSS oferece várias maneiras de expressar um comprimento, e escolher a correta faz a diferença entre um layout que escala com elegância e um que quebra. Este conversor transforma um único valor em todas as unidades CSS comuns de uma só vez. px (pixels) é a unidade de referência absoluta — no CSS, um pixel é definido como 1/96 de polegada. rem é relativo ao tamanho da fonte raiz do documento (o elemento <html>), que é 16px por padrão, então 1rem = 16px e 1,5rem = 24px; rem é o padrão moderno para dimensionamento porque alterar um único valor raiz redimensiona a página inteira, o que é ótimo para a acessibilidade. em é relativo ao tamanho da fonte do elemento pai, por isso se acumula quando aninhado. pt (pontos) é a unidade de impressão, fixa em 1pt = 1/72 de polegada = 1,3333px, então 12pt = 16px. % em um contexto de font-size é igual ao tamanho da fonte do pai, o que faz com que 100% seja o mesmo que 1em. vw e vh são 1% da largura e da altura do viewport — ideais para layouts fluidos em tela cheia. Defina o seu próprio tamanho de fonte raiz, tamanho de fonte do pai e tamanho do viewport no painel avançado; os padrões sensatos (16/16/1920×1080) cobrem o caso cotidiano px↔rem de imediato.
Como converter unidades CSS
- 1 Digite um valor e escolha a unidade em que ele está (por exemplo, 24 px ou 1,5 rem).
- 2 Leia o valor equivalente em todas as outras unidades na grade de resultados e toque no botão de copiar de qualquer cartão para copiá-lo pronto para colar (por ex. «1.5rem»).
- 3 Abra o painel avançado para alterar o tamanho da fonte raiz, o tamanho da fonte do pai ou o tamanho do viewport, caso o seu projeto não use os padrões 16px / 1920×1080.
As fórmulas de conversão
Cada conversão passa pelos pixels usando as proporções fixas do CSS: rem = px ÷ tamanho-da-fonte-raiz (padrão 16) — então px = rem × 16. em = px ÷ tamanho-da-fonte-do-pai (padrão 16). pt = px × 0,75, porque 1px = 1/96 de polegada e 1pt = 1/72 de polegada, dando 1pt = 96/72 px = 1,3333px e 1px = 0,75pt. % = px ÷ tamanho-da-fonte-do-pai × 100 (porcentagem de font-size, onde 100% = o tamanho da fonte do pai, idêntico a 1em). vw = px ÷ largura-do-viewport × 100, e vh = px ÷ altura-do-viewport × 100. Com os padrões, isso significa 16px = 1rem = 1em = 100% = 12pt = 0,8333vw = 1,4815vh. Se uma base como o tamanho da fonte raiz for definida como 0, a unidade correspondente fica indefinida e é exibida como «—» em vez de infinito.
Perguntas frequentes
Quantos px é 1rem?
Por padrão, 1rem = 16px, porque rem é relativo ao tamanho da fonte raiz (<html>) e os navegadores o definem como 16px de fábrica. Então 1,5rem = 24px e 2rem = 32px. Se você alterar o tamanho da fonte raiz — por exemplo, para 10px para simplificar as contas — então 1rem equivale a esse valor (16px passariam a ser 1,6rem). Defina o seu próprio tamanho de fonte raiz no painel avançado e o conversor recalcula instantaneamente.
Qual é a fórmula de px para rem?
rem = px ÷ tamanho-da-fonte-raiz, e o inverso é px = rem × tamanho-da-fonte-raiz. Com a raiz padrão de 16px, isso significa dividir um valor em pixels por 16 para obter rem: 24px ÷ 16 = 1,5rem, 10px ÷ 16 = 0,625rem. rem é preferível a px para tamanhos de fonte e espaçamento porque respeita a configuração de tamanho de fonte do navegador do usuário, o que é melhor para a acessibilidade.
Qual é o tamanho da fonte raiz padrão?
O tamanho da fonte raiz padrão em todos os principais navegadores é 16px, aplicado ao elemento <html>. É a base para rem, então 1rem = 16px a menos que você (ou uma folha de estilos) o substitua. Este conversor usa 16px como padrão tanto para o tamanho da fonte raiz quanto para o do pai; você pode alterar qualquer um deles no painel avançado para corresponder ao seu projeto.
Qual é a diferença entre px e pt?
px (pixel) é a unidade padrão para telas e é definida no CSS como 1/96 de polegada. pt (ponto) é a unidade tradicional de impressão/tipografia, igual a 1/72 de polegada. Isso torna a proporção fixa: 1pt = 96/72 px ≈ 1,3333px e 1px = 0,75pt. Então 12pt = 16px, e é por isso que um documento impresso de 12pt e um título de tela de 16px parecem do mesmo tamanho. Use px (ou rem) para a web e reserve pt para as folhas de estilo de impressão.
Ferramentas relacionadas
Continue construindo no UnitConv. Converta cores entre HEX, RGB e HSL com o conversor de cores, gere gradientes CSS, verifique as relações de contraste WCAG, calcule proporções de aspecto e explore unidades de comprimento além da web no conversor de unidades principal.