O que são unidades CSS?

Valores de comprimento em CSS sempre incluem uma unidade (ou uma palavra-chave especial como auto). A unidade diz ao navegador em relação a quê o número é medido.

Exemplo:

.card {
  padding: 16px;
  font-size: 1rem;
  width: 50%;
  gap: 2vw;
}

Cada valor acima vira um tamanho em pixels computado no motor de layout, mas o quadro de referência é diferente.

As três famílias que mais aparecem

Família	Exemplos	Relativo a
Absoluta	px	Pixels do dispositivo (CSS px)
Relativa à fonte	rem, em, %	Font-size da raiz ou do pai
Relativa ao viewport	vw, vh	Largura ou altura do viewport

CSS de produção mistura as três famílias. Isso é normal.

Por que unidades importam em projetos reais

Unidades não são só sintaxe. Elas afetam:

• Acessibilidade: tipografia em rem respeita melhor as configurações de fonte do navegador do que px fixo em tudo.
• Handoff de design: designers costumam especificar px; design systems costumam guardar tokens em rem.
• Comportamento responsivo: vw e clamp() escalam com o viewport sem media query para cada passo.
• Aninhamento de componentes: em e % dependem do contexto do pai — surpresa comum em componentes aninhados.

Unidades vs media queries

Media queries trocam regras em breakpoints. Unidades relativas e clamp() mudam o tamanho computado de forma contínua ou conforme o contexto.

As duas ferramentas resolvem problemas responsivos, mas respondem perguntas diferentes:

• Media query: “Aplique outra regra neste breakpoint.”
• rem/em/vw/clamp: “Calcule um tamanho a partir do contexto.”

Resumo

Antes de converter um valor de design, pergunte: “Este tamanho é relativo a quê?” px à tela, rem à raiz, em ao pai, vw ao viewport, % ao bloco contenedor.

Experimente o Conversor de unidades CSS / Gerador clamp com 16px e veja como o mesmo número vira rem, em e vw diferentes quando o contexto muda.