Módulo 6: Responsividade

2. Resumo da Aula Anterior

No Módulo 5, aprendemos a dar um toque premium ao nosso design com gradientes, sombras e imagens de fundo imersivas. Agora, vamos garantir que esse design fantástico funciona em qualquer ecrã.

3. O Que Vais Aprender Hoje

✅ A tag Viewport e por que é obrigatória.
✅ O conceito de Mobile-first.
✅ Como usar Media Queries.
✅ Breakpoints comuns (Tablet, Desktop).

4. Teoria: O Site Elástico

Conceito: Um site responsivo não é um site diferente para cada dispositivo; é o mesmo site que "se adapta" como um elástico. As Media Queries são como sensores que detetam a largura do ecrã e mudam as regras do CSS em tempo real.

👕 Analogia: A T-shirt de Tamanho Único

Imagina uma t-shirt mágica:

Versão Desktop: A t-shirt está esticada e mostra um desenho grande e complexo no peito.
Versão Mobile: Quando uma criança a veste, a t-shirt encolhe e o desenho reorganiza-se para caber no espaço pequeno sem ficar cortado ou deformado.

5. Exemplos Práticos

Exemplo 1: A Media Query Base

Mudar a cor de fundo apenas em ecrãs maiores.

/* Este estilo aplica-se a TODOS (começando pelo telemóvel) */
body { background-color: white; }

/* Só aplica se o ecrã tiver 768px ou mais (Tablet/Desktop) */
@media (min-width: 768px) {
  body { background-color: lightblue; }
}

O segredo é o min-width. Ele diz: "daqui para cima, usa esta regra".

Exemplo 2: Reorganizar Layout

Mudar de uma coluna para duas quando houver espaço.

.container { width: 100%; }

@media (min-width: 1024px) {
  .container {
    width: 80%;
    margin: 0 auto; /* Centra o conteúdo */
  }
}

No telemóvel o site usa 100% da largura. No computador, para não ficar "esticado" demais, limitamos a 80%.

6. Agora é a Tua Vez!

Vamos criar um menu que se esconde:

Cria uma lista de links <nav>.
No CSS base (Mobile), dá-lhe um display: none; (para simular um menu hambúrguer escondido).
Cria uma Media Query para min-width: 768px.
Dentro da Media Query, coloca o menu com display: block;.
Redimensiona o teu browser e vê a "mágica" a acontecer!

7. Verificação de Conhecimento

Carregando quiz...

8. Resumo do Que Aprendemos

📌 Mobile-first: Começa a desenhar para o ecrã pequeno.
📌 Media Queries permitem estilos condicionais.
📌 Breakpoints são os pontos de corte (ex: 768px, 1024px).
📌 Nunca te esqueças da tag Meta Viewport no head.

9. Desafios Práticos

Desafio 1: Inverter o Mobile-first

Se quisesses fazer o contrário (estilo para desktop e aplicar algo só em telemóveis), que propriedade usarias na Media Query em vez de `min-width`?

Desafio 2: O Desaparecido

Qual a propriedade CSS para esconder um elemento totalmente da página num determinado breakpoint?

Desafio 3: A Tag Crítica

Se o teu site responsivo parece minúsculo e "esmagado" no telemóvel real, que linha de código provavelmente falta no teu HTML?