Aula 14 - Responsividade 📱

Objetivo

Objetivo: Aprender a criar sites que se adaptam automaticamente a qualquer tamanho de tela (celulares, tablets e desktops) utilizando Media Queries e a filosofia Mobile-First.

1. O que é Web Design Responsivo? 🤔

Hoje, mais de 60% dos acessos à internet vêm de dispositivos móveis. Um site responsivo é aquele que rearranja seus elementos para oferecer a melhor experiência, independente do tamanho da tela.

Não Responsivo: O site fica "pequeno" e você precisa dar zoom. ❌
Responsivo: O conteúdo se ajusta, botões ficam maiores e o texto legível. ✅

2. A Meta Tag Viewport 🖼️

Para que a responsividade funcione, precisamos avisar o navegador que o site deve respeitar a largura do dispositivo. Lembra dessa tag no <head>?

<meta name="viewport" content="width=device-width, initial-scale=1.0">

3. Media Queries 📡

As Media Queries são filtros que aplicam CSS apenas se certas condições forem atendidas (como a largura da tela).

/* Estilo padrão (para celular) */
body { background-color: white; }

/* Se a tela tiver pelo menos 768px (Tablet) */
@media (min-width: 768px) {
    body { background-color: lightgrey; }
}

/* Se a tela tiver pelo menos 1024px (Desktop) */
@media (min-width: 1024px) {
    body { background-color: grey; }
}

4. Mobile-First 📱➡️💻

A técnica mais moderna consiste em escrever o CSS primeiro para telas pequenas e depois usar Media Queries para adicionar complexidade em telas maiores.

Vantagem: O site carrega mais rápido no celular e o design fica mais limpo.

5. Visualizando a Adaptação 📊

graph LR
    subgraph Mobile
    M1[Logo]
    M2[Conteúdo]
    M3[Menu Burguer]
    end
    subgraph Desktop
    D1[Logo]
    D2[Conteúdo]
    D3[Menu Extenso]
    D4[Barra Lateral]
    end
    Mobile -- Media Query --> Desktop

6. Prática: Grade Responsiva 🚀

Vamos transformar o Grid da aula anterior em algo que muda de acordo com a tela:

$ touch index.html estilo.css
$ # No CSS, crie uma grade que é 1 coluna no celular e 3 no PC:
$ .grade {
$   display: grid;
$   grid-template-columns: 1fr;
$ }
$ @media (min-width: 800px) {
$   .grade { grid-template-columns: repeat(3, 1fr); }
$ }

7. Mini-Projeto: Dashboard Flexível 🖱️

Crie uma página com um Header e 3 Cards de conteúdo.
No celular: Os cards devem ficar um abaixo do outro (empilhados).
No Desktop (min-width: 768px): Os cards devem ficar lado a lado usando Flexbox ou Grid.
O Header deve mudar de cor quando a tela for maior que 1024px.
Dica: Use as ferramentas de desenvolvedor (F12) e clique no ícone de celular para testar diferentes tamanhos.

8. Exercícios Progressivos 📝

Básicos

Por que a responsividade é essencial na web moderna?
Para que serve a meta tag viewport?

Intermediários

Explique como funciona uma Media Query com min-width.
O que significa a filosofia "Mobile-First"?

Desafio 🧠

Pesquise sobre as unidades de medida vw (viewport width) e vh (viewport height). Como elas podem ajudar na criação de layouts que ocupam toda a tela?

Próxima Aula: Vamos dar movimento ao site com Animações e Transições! ✨