Aula 17 — Design responsivo: pensando em diferentes telas

Hoje, as pessoas acessam sites por celulares, tablets, notebooks, monitores grandes e até TVs.

Design responsivo é a prática de adaptar o layout para funcionar bem em qualquer tamanho de tela.

O que é design responsivo?

Design responsivo significa que o layout:

• Se ajusta automaticamente ao tamanho da tela
• Mantém legibilidade e usabilidade
• Evita rolagem horizontal

A mudança de mentalidade

Antigamente, os sites eram pensados apenas para desktop.

Hoje, a abordagem moderna é:

• Mobile first — pensar primeiro no celular
• Depois adaptar para telas maiores

Layouts fluidos

Layouts responsivos evitam tamanhos fixos sempre que possível.

Em vez disso, usam:

• Porcentagens
• Unidades flexíveis
• Grid e Flexbox

 .container { max-width: 1200px; margin: 0 auto; padding: 16px; } 

Esse padrão centraliza o conteúdo e se adapta à largura da tela.

Conteúdo antes do layout

Em telas pequenas, o mais importante é:

• Texto legível
• Botões clicáveis
• Navegação simples

Responsividade com Flexbox e Grid

Flexbox e Grid foram criados já pensando em responsividade.

Exemplo com Flexbox:

 .cards { display: flex; flex-wrap: wrap; gap: 16px; } 

Os elementos se reorganizam conforme o espaço disponível.

Erros comuns em layouts não responsivos

• Usar largura fixa para tudo
• Ignorar telas pequenas
• Texto muito pequeno
• Elementos muito próximos

Responsivo não é só CSS

Embora o CSS seja a base, design responsivo envolve:

• HTML bem estruturado
• Conteúdo pensado para leitura
• Boas decisões de design

CSS apenas viabiliza essas escolhas.

Na próxima aula, vamos aprender sobre media queries — a ferramenta que permite aplicar estilos conforme o tamanho da tela 📐📱