Neste artigo
O que são unidades CSS?
As unidades CSS definem o tamanho dos elementos de uma página da web. Elas se dividem em duas categorias: as unidades absolutas (px, cm, mm, in, pt, pc), que têm tamanhos físicos fixos, e as unidades relativas (rem, em, vw, vh, vmin, vmax, %), que se ajustam conforme o contexto, como o tamanho da fonte ou as dimensões da viewport.
O design responsivo moderno depende muito das unidades relativas. A unidade rem se ajusta ao tamanho da fonte raiz (geralmente 16px), a em se ajusta ao tamanho da fonte do elemento pai e as unidades de viewport (vw, vh) se ajustam à janela do navegador, tornando os layouts fluidos em todos os dispositivos.
Como funciona a conversão de unidades CSS
Converter entre unidades CSS exige conhecer o contexto base: o tamanho da fonte raiz para rem, o tamanho da fonte do pai para em e as dimensões da viewport para vw/vh. A maioria das conversões usa uma simples multiplicação ou divisão.
- px para rem — divida o valor em pixels pelo tamanho da fonte raiz (padrão de 16px), de modo que 24px = 1.5rem quando a raiz é 16px
- rem para em — rem e em são iguais quando o elemento herda o tamanho da fonte raiz; caso contrário, multiplique pela proporção entre o tamanho da fonte do pai e o da raiz
- px para vw/vh — divida o valor em pixels pela largura (ou altura) da viewport e multiplique por 100, de modo que 192px = 10vw em uma viewport de 1920px de largura
Experimente gratuitamente — sem cadastro
Converter unidades CSS →Quando usar a conversão de unidades CSS
Converter entre unidades CSS é uma tarefa diária no desenvolvimento front-end moderno.
- Design responsivo — converta mockups de pixels fixos em layouts baseados em rem ou vw que se ajustam com elegância a diferentes tamanhos de tela, do celular ao desktop
- Acessibilidade — usar unidades rem garante que o texto se ajuste corretamente quando os usuários alteram o tamanho de fonte padrão do navegador, um requisito de acessibilidade fundamental
- Tokens de design system — converta as especificações do designer (geralmente em pixels) em tokens baseados em rem que mantêm proporções consistentes de espaçamento e tipografia
Perguntas frequentes
Devo usar rem ou em para os tamanhos de fonte?
Use rem na maioria dos casos. As unidades rem são relativas ao tamanho da fonte raiz, o que as torna previsíveis independentemente da profundidade de aninhamento. As unidades em se acumulam quando aninhadas (um 1.2em dentro de outro 1.2em vira 1.44x), o que pode causar tamanhos inesperados. Reserve em para componentes específicos em que o ajuste relativo ao pai seja intencional.
Qual é o tamanho de fonte raiz padrão nos navegadores?
Todos os principais navegadores usam 16px como tamanho de fonte raiz padrão. Isso significa que 1rem = 16px, a menos que seja sobrescrito pelo CSS. Os usuários podem alterá-lo nas configurações do navegador por acessibilidade, por isso é importante usar rem em vez de px para os tamanhos de fonte e o espaçamento em um design acessível.
Quando devo usar unidades de viewport em vez de rem?
Use unidades de viewport (vw, vh) para os elementos que devem se ajustar à janela do navegador em vez do tamanho da fonte. Exemplos comuns incluem seções hero em tela cheia (height: 100vh), tipografia fluida (clamp com vw) e preenchimento responsivo em contêineres. Evite vw para o texto do corpo: ele ignora as preferências de fonte do usuário.