Media queries
Media queries fazem uma página HTML e uma folha de estilo se adaptarem a celulares, laptops e monitores largos. O curso começa pela tag meta de viewport, que faz o navegador mobile usar a largura real do aparelho. Depois vêm a sintaxe de @media, min-width e max-width e a cascata dentro dessas regras. Compara mobile-first e desktop-first, mostra como escolher breakpoints pelo conteúdo e não por dispositivos, e aplica media queries a flexbox e posicionamento. Também trata de orientação, modo escuro e movimento reduzido, terminando numa navbar e grade de cards mobile-first.
O que você vai aprender
- ✓Por que a tag meta de viewport é necessária para media queries no celular
- ✓Escrever regras @media com min-width, max-width e sintaxe de intervalo
- ✓Organizar folhas de estilo em mobile-first ou desktop-first
- ✓Escolher breakpoints observando onde o conteúdo quebra
- ✓Trocar flex-direction, display e position em breakpoints
- ✓Responder a orientação, modo escuro e preferência por movimento reduzido
Por que design responsivo existe
Um visitante pode abrir sua página num celular na mão, num laptop na mesa ou num monitor duas vezes mais largo. Todo curso de CSS até aqui supôs uma quantidade razoável de espaço: fileiras de flexbox, badges posicionados, cards centralizados. Nenhum fez a pergunta para a qual o design responsivo…
Ler a aula completa grátis →Currículo
7 aulasPor que design responsivo existe
Por que uma página adaptável substituiu sites mobile separados, e por que a tag meta de viewport vem primeiro.
Sintaxe de @media e min-width/max-width
Como blocos @media funcionam, a diferença entre min-width e max-width, e por que a ordem das regras importa.
Mobile-first vs desktop-first
Compara sobrescrever para baixo com max-width e somar com min-width, e por que mobile-first virou o padrão.
Escolhendo breakpoints: conteúdo, não dispositivos
Por que breakpoints com nome de aparelho são frágeis e como achá-los redimensionando até o conteúdo quebrar.
Flexbox e posicionamento responsivos
Usa media queries para inverter flex-direction, mostrar ou esconder a navegação e mudar a posição de uma barra lateral.
Além da largura: orientação e preferências do usuário
Trata de orientation, prefers-color-scheme e prefers-reduced-motion, que usam a mesma sintaxe e cascata das queries de largura.
Juntando tudo: uma navbar e grade de cards mobile-first
Monta uma navbar e uma grade de cards mobile-first que crescem em 768px e seguem o tema escuro.