Visão geral
Curso de unidades CSS e dimensionamento responsivo
Fluxos práticos de unidades CSS: px, rem, em, %, vw, vh, contexto do font-size raiz, clamp() fluido e depuração de layouts responsivos.
Este curso ensina unidades CSS como problema de entrega frontend, não como exercício de calculadora. Especificações de design chegam em px. Codebases preferem rem, em ou valores fluidos. Layouts dependem da largura do viewport, do font-size do pai e do comportamento em breakpoints.
Você aprenderá quando usar px, rem, em, %, vw e vh; como o font-size da raiz altera valores computados; como clamp() cria tipografia e espaçamento fluidos; e como verificar conversões antes de colar CSS em uma biblioteca de componentes ou design system.
Para quem é este curso
- Desenvolvedores frontend que traduzem Figma ou specs de design em CSS
- Engenheiros que mantêm bibliotecas de componentes com tokens em rem
- Desenvolvedores full-stack que precisam de font-size e espaçamento responsivos sem media queries ad hoc
- Quem depura “por que esse rem fica errado no mobile?”
O que você vai aprender
- O que são unidades CSS e como o navegador as computa
- Trade-offs entre px, rem e em para tipografia e componentes
- vw, vh e unidades percentuais no contexto de layout
- Font-size da raiz e fluxos de conversão px → rem
clamp()para font-size e espaçamento fluidos- Um fluxo prático de depuração antes de entregar CSS
Use o Conversor de unidades CSS / Gerador clamp relacionado enquanto lê. O objetivo não é só converter um valor, mas entender o contexto que torna um comprimento CSS correto em produção.