Conversor de Unidades CSS (px / rem / em / vh / vw)

Por que usar rem em vez de px

Os navegadores começam em 16px, mas pessoas com baixa visão frequentemente aumentam o tamanho padrão da fonte nas configurações do navegador. Textos dimensionados em rem acompanham essa configuração; textos dimensionados em px, não. O zoom da página amplia os dois, mas a configuração do tamanho da fonte é o que muitos leitores usam, e o critério de redimensionamento de texto da WCAG espera que o texto aumente para 200% sem perda. Defina o tamanho do texto e o espaçamento ao redor dele em rem, e use px para linhas finas e bordas.

A coluna em e o aninhamento

Um em é relativo ao tamanho da fonte do próprio elemento; para font-size, isso significa o tamanho do elemento pai. Os valores em exibidos aqui pressupõem que o pai esteja no tamanho raiz, o que só vale no nível superior. Dentro de um elemento 0.875em, usar 0.875em novamente resulta em 12.25px, não 14px, e a redução se acumula. Por isso, rem é a opção padrão mais segura, enquanto em é adequado para espaçamentos que devem acompanhar o texto do componente.

A base de 62.5% e as unidades da viewport

Definir html { font-size: 62.5% } faz 1rem equivaler a 10px, facilitando os cálculos; informe 10 como tamanho base para corresponder a isso. Essa configuração reduz todo o restante dimensionado em rem, inclusive componentes de terceiros; por isso, defina novamente um tamanho legível em body.

Os valores de vw e vh pressupõem uma viewport de 1440 × 900. Em celulares, 100vh pode ser mais alto que a área visível enquanto a barra de ferramentas do navegador está aberta; 100svh e 100dvh são as unidades que levam isso em conta.

Como usar

1. Informe um valor em pixels (px) e o tamanho base da raiz (padrão 16px).
2. Veja os valores calculados de rem, em, vw e vh.
3. Copie trechos de CSS prontos para uso ou consulte a tabela de escala.

Privacidade e limitações

Executa instantaneamente em JavaScript no lado do cliente.