Aula 14 - Responsividade 📱
Um Site Para Todos os Tamanhos
👋 Olá!
Hoje em dia, a maioria das pessoas acessa a web pelo celular.
Seu site está pronto para caber na palma da mão? 📲
Agenda de Hoje 📅
- O que é Responsividade?
- Meta Tag Viewport
- Media Queries
- Breakpoints (Pontos de Quebra)
- Estratégia Mobile-First
📱 1. O que é Responsividade?
- É a capacidade do site se adaptar ao tamanho da tela.
- Layouts flexíveis que mudam conforme o dispositivo.
O Problema do Zoom 🔍
- Sites antigos ficavam minúsculos no celular.
- O usuário tinha que dar "pinça" para ler.
- Hoje, isso é inaceitável!
🖼️ 2. Meta Tag Viewport
O tradutor de telas!
- Diz ao navegador: "Use a largura real do aparelho". - Sem ela, as Media Queries não funcionam bem.📡 3. Media Queries
O "SE" do CSS.
Como funciona? 🤔
"SE a tela for maior que 800px, mude a cor para azul."
📊 Estrutura de Adaptação
graph LR
C[Celular - 1 Coluna] -- min-width: 768px --> T[Tablet - 2 Colunas]
T -- min-width: 1024px --> D[Desktop - 3 Colunas]🏗️ 4. Mobile-First
O Jeito Moderno! 🚀
Primeiro o Celular 🤳
- Escreva o CSS básico pensando no celular.
- Use Media Queries para adicionar colunas no PC.
- Resultado: Site mais rápido e leve.
📍 5. Breakpoints Comuns
- 576px: Celulares grandes.
- 768px: Tablets (iPad).
- 1024px: Desktops e Laptops.
- 1200px: Telas grandes.
💻 6. Exemplo de Layout Flexível
/* Celular */
.alinhamento {
display: flex;
flex-direction: column;
}
/* Desktop */
@media (min-width: 768px) {
.alinhamento {
flex-direction: row;
}
}
Resumo da Aula ✅
- Responsividade = Adaptação.
- Viewport tag é obrigatória.
- Media Queries filtram o estilo por tamanho.
- Mobile-First: comece pelo pequeno.
Próxima Aula ✨
Animações e Transições
Vamos dar movimento e suavidade ao nosso design!
Dúvidas? 🤔
"Um site não deve ser um objeto estático, mas um ecossistema que se adapta ao ambiente do usuário."