Módulo 2 / HTML & CSS

Responsividade

Media queries e a abordagem mobile-first.

school Aula 09 schedule 2 horas

Contexto

Por que responsividade?

smartphone

Mobile

Mais de 60% do tráfego web vem de dispositivos móveis

devices

Multi-dispositivo

Celulares, tablets, notebooks, desktops, TVs

search

SEO

Google prioriza sites responsivos nos resultados de busca

lightbulb Um site responsivo se adapta a qualquer tamanho de tela sem perder usabilidade.

Pré-requisito

A meta tag viewport

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

warning Sem esta meta tag, o navegador mobile renderiza a página como se fosse um desktop de ~980px.

settings O que faz

▸ width=device-width a largura segue o dispositivo

▸ initial-scale=1.0 sem zoom inicial

▸ Sempre inclua no <head> de todo HTML

Ferramenta principal

Media Queries

/* Estilos padrão (todos os tamanhos) */
.container {
  padding: 16px;
}

/* Telas maiores que 768px */
@media (min-width: 768px) {
  .container {
    padding: 32px;
    max-width: 720px;
    margin: 0 auto;
  }
}

/* Telas maiores que 1024px */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
}

tune Sintaxe

@media (condição) {
  /* regras CSS */
}

/* Combinando condições */
@media (min-width: 768px)
  and (max-width: 1023px) {
  /* só tablets */
}

min-width a partir de X pixels

max-width até X pixels

orientation portrait / landscape

Estratégia

Mobile-first

close Desktop-first (evitar)

/* Estilos para desktop */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* Desfazer para mobile */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

Começa complexo e precisa "desfazer" para telas menores.

check Mobile-first (recomendado)

/* Base: mobile (1 coluna) */
.grid {
  display: grid;
  gap: 16px;
}

/* Telas médias: 2 colunas */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Telas grandes: 3 colunas */
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Começa simples e adiciona complexidade conforme a tela cresce.

Referência

Breakpoints comuns

smartphone

Mobile Padrão (sem media query)

< 640px

tablet

Tablet sm / md

640px / 768px

laptop

Laptop lg

1024px

desktop_windows

Desktop xl / 2xl

1280px / 1536px

lightbulb Estes são os breakpoints padrão do Tailwind CSS. Use como referência, mas adapte ao seu projeto.

Ferramentas

Unidades responsivas

Porcentagens

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

Sempre relativo ao elemento pai.

Viewport units

.hero {
  height: 100vh;
  width: 100vw;
}

.titulo {
  font-size: 5vw;
}

Relativo ao tamanho da janela.

clamp()

/* min, preferido, max */
h1 {
  font-size: clamp(
    1.5rem, 4vw, 3rem
  );
}

Tamanho fluido com limites. Ideal para tipografia responsiva.

Mídia

Imagens responsivas

image CSS básico

/* Imagem nunca ultrapassa o contêiner */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Imagem como background */
.hero {
  background-image: url('bg.jpg');
  background-size: cover;
  background-position: center;
}

photo_size_select_large object-fit

/* Controla como a imagem preenche */
.avatar {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
}

/* Valores: */
/* cover   = preenche, pode cortar */
/* contain = mostra tudo, pode sobrar espaço */
/* fill    = estica (distorce) */

Receitas

Padrões responsivos

Menu hamburguer

/* Mobile: menu oculto */
.nav-links { display: none; }
.hamburger { display: block; }

/* Desktop: menu visível */
@media (min-width: 768px) {
  .nav-links { display: flex; }
  .hamburger { display: none; }
}

Sidebar colapsável

/* Mobile: sem sidebar */
.layout {
  display: grid;
  grid-template-columns: 1fr;
}

/* Desktop: com sidebar */
@media (min-width: 1024px) {
  .layout {
    grid-template-columns: 250px 1fr;
  }
}

Tipografia fluida

body {
  font-size: clamp(14px, 2vw, 18px);
}
h1 {
  font-size: clamp(1.8rem, 5vw, 3.5rem);
}

Grid auto-responsivo

/* Sem media queries! */
.cards {
  display: grid;
  grid-template-columns:
    repeat(auto-fit,
      minmax(250px, 1fr));
  gap: 16px;
}

Mão na massa

Exercício prático

edit_note Torne sua página responsiva

Verifique se a meta tag viewport está no HTML
Aplique img { max-width: 100%; height: auto; }
Use clamp() para os tamanhos de fonte dos títulos
Crie media queries mobile-first:
- ▸ Cards em 1 coluna no mobile, 2 no tablet, 3 no desktop
- ▸ Navbar com links visíveis somente a partir de 768px
Teste redimensionando o navegador (ou com DevTools: F12)

star Bônus: use o DevTools para simular diferentes dispositivos!

Próxima aula

Aula 10

Animações e transições CSS.

task_alt O que aprendemos hoje

check_circle Meta tag viewport
check_circle Media queries e breakpoints
check_circle Abordagem mobile-first vs desktop-first
check_circle Unidades responsivas: %, vw/vh, clamp()
check_circle Imagens responsivas e padrões comuns

Próxima aula

auto_stories Referência: MDN Media Queries