Conversor de Unidades CSS

Referência

Unidades CSS

CSS oferece unidades absolutas e relativas. Unidades absolutas como px são fixas independentemente do contexto. Unidades relativas como rem, em e vw escalam com base em uma referência — essenciais para layouts responsivos e acessíveis.

px, rem, em, vw

px (pixels) — unidade absoluta. 1px é um pixel independente do dispositivo. Use para bordas, sombras e elementos que não devem escalar com o tamanho de fonte.

rem (root em) — relativo ao tamanho de fonte do elemento raiz (html). O tamanho raiz padrão do navegador é 16px. Preferido para tamanhos de fonte e espaçamentos, pois respeita as configurações do usuário.

em — relativo ao tamanho de fonte do elemento pai. Pode se acumular em elementos aninhados. Útil para paddings e margens que devem escalar com o tamanho de fonte do próprio elemento.

vw (largura do viewport) — 1vw = 1% da largura do viewport. Ótimo para tipografia fluida e layouts de largura total que se adaptam ao tamanho da tela.

Conversões comuns de px para rem

Com a base padrão do navegador de 16px: 12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 32px = 2rem, 48px = 3rem. Para unidades de viewport em um design de 1440px: 14.4px = 1vw, 72px = 5vw.

Por que rem é preferido para acessibilidade

Usar rem para tamanhos de fonte respeita a preferência de tamanho de fonte do navegador do usuário. Quando um usuário configura seu navegador para 20px em vez do padrão 16px, layouts baseados em rem escalam proporcionalmente enquanto layouts baseados em px permanecem fixos. WCAG 1.4.4 (Redimensionar texto) requer que o texto possa ser redimensionado até 200% sem perda de conteúdo ou funcionalidade — as unidades rem satisfazem este requisito naturalmente.

Privacidade

Toda a conversão roda 100% no seu navegador. Nenhum dado é enviado a nenhum servidor.