Conversor de Unidades de CSS

Como usar Conversor de Unidades de CSS

O CSS1 de 1996 chegou com apenas seis unidades de medida: `px`, `pt`, `pc`, `cm`, `mm` e `in` — todas absolutas, fixas, pensadas para o mundo da impressão transposto para a tela. O CSS3 expandiu esse vocabulário drasticamente com unidades relativas ao viewport como `vw` e `vh`, e com o `rem` que respeita a raiz do documento. Mas foi o cenário mobile que forçou a criação das unidades mais recentes: `dvh`, `svh` e `lvh`, introduzidas para resolver o problema clássico do endereço do navegador mobile que aparece e desaparece ao rolar a página, bagunçando layouts que usavam `100vh` como altura total da tela. Hoje o CSS tem mais de 20 unidades de medida, cada uma com uma semântica precisa e casos de uso distintos.

Na prática do dia a dia, o problema não é conhecer todas as unidades — é converter entre elas num fluxo de trabalho onde ferramentas de design, código e sistemas de componentes falam línguas diferentes. Um arquivo do Figma entrega especificações em `px`. O design system da empresa define a escala tipográfica em `rem`. O layout usa breakpoints em `em` para compatibilidade máxima com browsers antigos. E o novo componente de hero precisa ocupar exatamente a altura visível da janela no mobile sem ser afetado pela barra de endereço. Ter um conversor com contexto visual imediato elimina a necessidade de abrir o console do browser e fazer cálculos manualmente a cada decisão de layout.

Dois pontos que o WCAG — as diretrizes de acessibilidade da web — destacam merecem atenção especial. Primeiro: evitar `px` para tamanhos de fonte, porque o `px` é a única unidade que não respeita a preferência de tamanho de texto configurada pelo usuário no browser ou no SO. Segundo: `100vw` inclui a largura da barra de rolagem vertical quando ela está visível, o que pode causar overflow horizontal em páginas com conteúdo exatamente na largura do viewport — um bug sutil que aparece só quando o conteúdo é longo o suficiente para a barra aparecer. E para o mobile, `100dvh` em vez de `100vh` é a forma moderna de garantir que o layout ocupe exatamente a área visível independentemente do comportamento da interface do browser.