Conversor de Unidades CSS

Conversor de Unidades CSS - Calculadora de px, rem, em, %

🎨 Converta entre unidades CSS: pixels (px), rem, em, percentagens (%), pontos (pt) e unidades de viewport (vw, vh). Ferramenta essencial para design e desenvolvimento web responsivo.

Tipos de Unidades CSS

• Unidades absolutas: px, pt, cm, mm, in - tamanho fixo independente do contexto
• Unidades relativas: rem, em, %, vw, vh - escalam com o pai ou o viewport
• Relativas à fonte: rem, em, ch, ex - baseadas no tamanho da fonte
• Relativas ao viewport: vw, vh, vmin, vmax - baseadas nas dimensões do viewport

Explicação das unidades

• px (pixels): 1px = 1 pixel do dispositivo. Unidade absoluta, precisa, mas não escalável.
• rem: Relativo ao elemento raiz (html). 1rem = 16px por padrão.
• em: Relativo ao tamanho da fonte do elemento pai. Pode acumular em elementos aninhados.
• %: Relativo à propriedade do elemento pai. 100% = igual ao pai.
• pt (pontos): Unidade de impressão. 1pt = 1/72 de polegada ≈ 1.333px.
• vw: 1vw = 1% da largura do viewport. 100vw = largura total.
• vh: 1vh = 1% da altura do viewport. 100vh = altura total.

Conversões comuns

• 1rem = 16px (configuração padrão do navegador)
• 1em = 16px (se o pai for 16px)
• 100% = tamanho do elemento pai
• 12pt = 16px (comum em impressão)
• 1vw = 19.2px (em viewport de 1920px)

Método 62,5%

Defina html { font-size: 62.5%; } para fazer 1rem = 10px. Isso simplifica cálculos: 1.6rem = 16px, 2.4rem = 24px, etc.

Considerações de acessibilidade

• Use rem para fontes: respeita as preferências de tamanho de fonte do navegador
• Evite px para fontes: não escala com configurações do usuário
• Use unidades relativas: torna designs acessíveis com zoom/magnificação
• Teste com tamanhos diferentes: verifique zoom de 200% e configurações de texto grande

Design responsivo

Use rem em media queries: @media (min-width: 48rem) em vez de 768px. Isso garante que os breakpoints escalem com as preferências de tamanho de fonte do usuário.

💡 Dica profissional: A melhor prática moderna é usar rem para a maioria dos tamanhos (fontes, espaçamentos, breakpoints), px para bordas e detalhes finos, e % ou unidades de viewport para layouts. Evite em para espaçamentos, pois pode acumular de forma inesperada.