Conversor de Unidades CSS
Tabela de Referência Rápida (base 16px)
| PX | REM | EM | VW (1920) | VH (1080) |
|---|---|---|---|---|
| 8 | 0.5 | 0.5 | 0.4167 | 0.7407 |
| 10 | 0.625 | 0.625 | 0.5208 | 0.9259 |
| 12 | 0.75 | 0.75 | 0.625 | 1.1111 |
| 14 | 0.875 | 0.875 | 0.7292 | 1.2963 |
| 16 | 1 | 1 | 0.8333 | 1.4815 |
| 18 | 1.125 | 1.125 | 0.9375 | 1.6667 |
| 20 | 1.25 | 1.25 | 1.0417 | 1.8519 |
| 24 | 1.5 | 1.5 | 1.25 | 2.2222 |
| 32 | 2 | 2 | 1.6667 | 2.963 |
| 48 | 3 | 3 | 2.5 | 4.4444 |
| 64 | 4 | 4 | 3.3333 | 5.9259 |
Esta ferramenta processa os dados localmente no seu navegador.
Entendendo as Unidades CSS
O CSS oferece diversas unidades de medida, divididas em absolutas e relativas . Escolher a unidade correta é fundamental para criar layouts acessíveis e responsivos.
Unidades Absolutas: PX
Pixels (px) são a unidade absoluta mais usada na web. Um pixel CSS corresponde a um ponto lógico na tela (não necessariamente um pixel físico em telas de alta resolução). PX é ideal para valores que devem permanecer fixos, como bordas, sombras e media queries.
Unidades Relativas: REM e EM
REM (Root EM) é relativo ao font-size do elemento <html> . Como a referência é sempre a mesma, REM é previsível e consistente — a unidade mais recomendada para layouts modernos. EM é relativo ao font-size do elemento pai, o que pode criar efeitos em cascata indesejados quando elementos estão aninhados.
Unidades de Viewport: VW e VH
VW (Viewport Width) e VH (Viewport Height) representam 1% da largura e altura da janela do navegador, respectivamente. São perfeitas para seções que ocupam a tela inteira ( height: 100vh ) ou tipografia fluida ( font-size: 2vw ), mas devem ser usadas com cuidado em dispositivos móveis onde a barra de endereço pode alterar o viewport.
Unidade Percentual: %
A porcentagem (%) é relativa ao valor do elemento pai para a mesma propriedade. Por exemplo, width: 50% ocupa metade da largura do pai. Uma peculiaridade importante: padding e margin em % são sempre calculados com base na largura do pai, mesmo para valores verticais.
Qual unidade usar?
A recomendação geral é: use REM para fontes e espaçamentos (acessibilidade), PX para bordas e sombras, VW/VH para layouts de tela cheia, e % para larguras fluidas dentro de containers. Combine as unidades conforme a necessidade — não existe uma regra única.
Perguntas Frequentes
REM (Root EM) é uma unidade relativa que se baseia no tamanho da fonte do elemento raiz (<html>). Se o html tem font-size: 16px, então 1rem = 16px, 2rem = 32px, e assim por diante. É a unidade mais recomendada para layouts responsivos.
REM é relativo ao font-size do elemento raiz (<html>), enquanto EM é relativo ao font-size do elemento pai. Isso significa que EM pode gerar valores "cascateados" — se um elemento pai tem 20px e você usa 1.5em, será 30px. Já REM sempre se refere ao mesmo valor raiz, tornando-o mais previsível.
VW (Viewport Width) e VH (Viewport Height) são unidades relativas ao tamanho da janela do navegador. 1vw equivale a 1% da largura do viewport e 1vh a 1% da altura. São ideais para criar layouts que se adaptam ao tamanho da tela, especialmente para seções hero de tela cheia.
Use PX para valores que devem permanecer fixos independentemente das configurações do usuário, como bordas (border: 1px), sombras (box-shadow) e media queries. Use REM para tamanhos de fonte, espaçamentos e layouts que devem escalar quando o usuário altera o zoom ou a font-size padrão do navegador.
A font-size base (geralmente 16px nos navegadores) é o valor de referência para converter entre PX e REM. A fórmula é: REM = PX / font-size base. Se a base for 16px, 24px = 1.5rem. Se você alterar a base para 10px (uma prática comum com html { font-size: 62.5% }), 24px = 2.4rem.
A unidade % em CSS é relativa ao valor da mesma propriedade no elemento pai. Para width, 50% significa metade da largura do pai. Para font-size, 150% significa 1.5× o font-size do pai. O contexto de referência muda conforme a propriedade: padding em % é sempre relativo à largura do pai, mesmo para padding vertical.