toolsmoah

Conversor de CSS px ↔ rem

Converta entre as unidades CSS px e rem.

Conversor de Unidades CSS
Converta pixels (px) para unidades rem.
Explicação da Unidade CSS

px (Pixels)

Uma unidade absoluta que representa um pixel na tela. Tem um tamanho fixo e é limitada para design responsivo.

rem (Root EM)

Uma unidade relativa baseada no tamanho da fonte do elemento raiz (html). Benéfica para acessibilidade e design responsivo.

Fórmula de Conversão

px → rem: px ÷ tamanho da fonte base
rem → px: rem × tamanho da fonte base

Recomendações de Uso

  • • Tamanho da fonte: rem recomendado
  • • Espaçamento (margem, preenchimento): rem recomendado
  • • Borda: px utilizável
  • • Consultas de mídia: rem recomendado
Valores de Conversão Comuns
px
rem
8px
0.5rem
12px
0.75rem
14px
0.875rem
16px
1rem
18px
1.125rem
20px
1.25rem
24px
1.5rem
32px
2rem

Guia Completo de Unidades CSS

A escolha das unidades CSS certas no desenvolvimento web afeta muito a experiência do usuário e a acessibilidade. Aprenda as diferenças entre px e rem e como usá-los em situações apropriadas.

Guia Detalhado da Unidade Pixel (px)

📐 Recursos

  • • Unidade absoluta com correspondência 1:1 com os pixels da tela
  • • Tamanho consistente em todos os navegadores
  • • Controle preciso do layout possível
  • • Não afetado pelas configurações do usuário

✅ Casos de Uso Recomendados

  • • Espessura da borda (1px, 2px)
  • • Deslocamento da sombra
  • • Tamanhos de ícones (16px, 24px)
  • • Ajustes finos de espaçamento

⚠️ Cuidados

  • • Ignora as configurações de tamanho de fonte do usuário
  • • Pode causar problemas de acessibilidade
  • • Limitado para design responsivo
Guia Detalhado da Unidade rem

📐 Recursos

  • • Baseado no tamanho da fonte do elemento raiz (html)
  • • Reflete as configurações do usuário
  • • Mantém proporções consistentes
  • • Amigável à acessibilidade

✅ Casos de Uso Recomendados

  • • Configurações de tamanho de fonte
  • • Espaçamento (margem, preenchimento)
  • • Tamanhos de contêineres
  • • Pontos de interrupção de consulta de mídia

💡 Vantagens

  • • Mantém as proporções ao escalar
  • • Melhora a acessibilidade
  • • Manutenção fácil
Guia de Aplicação Prática

🎯 Estratégia de Uso Específica da Unidade

Tipografia

Use rem para tamanhos de fonte e espaçamento entre linhas rem

Layout

Use rem para espaçamento e contêineres rem

Detalhes

Use px para bordas e sombras px

📱 Dicas de Design Responsivo

Abordagem Mobile-first

Defina o tamanho da fonte base para 16px e dimensione com unidades rem

html { font-size: 16px; }
h1 { font-size: 2rem; /* 32px */ }
Uso de Consulta de Mídia

Mantenha a consistência com pontos de interrupção baseados em rem

@media (min-width: 48rem) { /* 768px */ }
html { font-size: 18px; }
}

♿ Considerações de Acessibilidade

✅ Práticas Recomendadas
  • • Defina os tamanhos das fontes com unidades rem
  • • Mantenha o tamanho mínimo da fonte de 16px
  • • Espaçamento entre linhas suficiente (1.5 ou mais)
  • • Alvo de toque mínimo de 44px
❌ Coisas a Evitar
  • • Usar valores px fixos para tamanhos de fonte
  • • Texto pequeno abaixo de 12px
  • • Larguras de contêiner fixas
  • • Espaçamento entre linhas de 1.0 ou menos

🔧 Suporte e Compatibilidade do Navegador

Unidade px

Suporte perfeito em todos os navegadores. Disponível a partir do IE6+.

Unidade rem

Suporte perfeito no IE9+ e navegadores modernos. Fallback necessário para o IE8 e inferior.

Para suporte ao IE8: Declare o valor em px primeiro, depois adicione o valor em rem como fallback

font-size: 18px; /* IE8 fallback */
font-size: 1.125rem; /* Modern browsers */
    Conversor de CSS px ↔ rem | Laboratório de Texto