Absoluto vs relativo: dois tipos de número

Nem todo 16 significa a mesma coisa

Escreva font-size: 16px num elemento e font-size: 1rem em outro. Com as configurações padrão do navegador, os dois ficam com 16 pixels de altura. Mude uma configuração, como a preferência de fonte do usuário ou o tamanho de fonte de um pai, e eles deixam de bater. Um é um número fixo, e o outro depende de outra coisa. Essa diferença é o assunto deste curso.

Unidades absolutas: uma medida fixa, sempre

Uma unidade absoluta descreve um tamanho que nunca depende de mais nada no documento. 1px é 1px ao lado de um título, dentro de três <div>s aninhadas ou em qualquer outro lugar da página.

.box {
  width: 200px;
  border: 1px solid black;
}

px (pixels) é a unidade absoluta que você vai usar quase sempre. O CSS também define cm, mm, in e pt, emprestadas da impressão. Elas quase não aparecem em CSS da web, porque tela não é papel.

Unidades relativas: um tamanho que depende do contexto

Uma unidade relativa descreve um tamanho como uma proporção de outra coisa: um tamanho de fonte, a viewport ou um elemento pai. A mesma declaração pode dar valores diferentes em pixels conforme onde é usada.

.box {
  font-size: 1.5em;   /* 1.5× algum outro tamanho de fonte */
  padding: 2rem;      /* 2× o tamanho de fonte do elemento raiz */
  width: 50%;         /* metade da largura do elemento pai */
}

Unidades relativas seguem regras rígidas e fáceis de aprender. Elas só apontam para um alvo que se move, em vez de um número fixo. As próximas três aulas cobrem em e rem, a dupla que aparece o tempo todo em tamanho de fonte e espaçamento. Porcentagens e unidades de viewport vêm perto do fim.

Por que se importar com unidades relativas

Se uma unidade relativa vira um valor em pixels de qualquer jeito, por que não escrever os pixels? Dois motivos guiam a maioria das decisões deste curso. O primeiro é escalar junto: dimensione um componente em unidades relativas, e mudar um valor na raiz redimensiona tudo. O segundo importa mais: respeitar o usuário. Navegadores deixam o visitante definir o tamanho base do texto, e tamanhos de fonte relativos seguem essa escolha. Uma página feita em pixels fixos a ignora. A aula 5 aprofunda isso.

O que este curso cobre

• Aula 1, Absoluto vs relativo (dois tipos de número): uma medida fixa versus um tamanho que depende do contexto (você está aqui)
• Aula 2, px, a unidade absoluta: o que um "pixel" significa para um navegador
• Aula 3, em, relativo ao tamanho de fonte: a surpresa de acúmulo que causa quando aninhado
• Aula 4, rem, relativo à raiz: a correção para o problema de acúmulo do em
• Aula 5, rem e acessibilidade: por que dimensionamento relativo de fonte respeita a preferência de um usuário
• Aula 6, Porcentagens e unidades de viewport: mais duas unidades relativas que você vai encontrar constantemente
• Aula 7, Juntando tudo: uma estratégia prática para escolher uma unidade deliberadamente

No final, recorrer a px, em ou rem vai ser uma decisão, não um hábito.