Unidades CSS
O curso explica como funcionam os tamanhos no CSS, começando pela diferença entre unidades absolutas e relativas. Ele trata do px como pixel de referência, do em e do acúmulo que ele causa quando aninhado, e do rem, ligado ao font-size da raiz. Mostra como o rem respeita a configuração de tamanho de fonte que o visitante escolhe no navegador. Depois vêm porcentagens e unidades de viewport, e um exemplo final de card aplica uma estratégia para escolher cada unidade de propósito.
O que você vai aprender
- ✓A diferença entre unidades CSS absolutas e relativas
- ✓Como o CSS define px como pixel de referência em qualquer densidade de tela
- ✓Por que o em se acumula quando aninhado e onde ele funciona bem
- ✓Como o rem usa o font-size da raiz
- ✓Como tamanhos em rem seguem a configuração de fonte do navegador do usuário
- ✓Contra o que porcentagens, vw e vh medem
Absoluto vs relativo: dois tipos de número
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…
Ler a aula completa grátis →Currículo
7 aulasAbsoluto vs relativo: dois tipos de número
Compara unidades absolutas, que ficam fixas, com unidades relativas que dependem de fonte, pai ou viewport.
px: a unidade absoluta
Explica o px como pixel de referência, como telas de alto DPI o desenham e quais detalhes fixos combinam com ele.
em: relativo ao tamanho de fonte
Mostra a qual font-size o em se refere, como ele se acumula quando aninhado e por que serve para padding de componentes.
rem: relativo à raiz
Apresenta o rem, ligado ao font-size da raiz, que elimina o acúmulo em qualquer nível de aninhamento.
rem e acessibilidade
Explica como a configuração de fonte base do navegador altera valores em rem, enquanto tamanhos em px a ignoram.
Porcentagens e unidades de viewport
Apresenta porcentagens, que dependem do pai e da propriedade, e vw e vh, que acompanham a viewport.
Juntando tudo: uma estratégia de unidades
Percorre um componente de card e explica o motivo de usar px, rem, em ou porcentagem em cada propriedade.