Aula 08 de 10

Responsividade

Fazer uma página funcionar bem no celular, no tablet e no computador — sem criar três versões diferentes.

@media mobile-first unidades relativas clamp() max-width

// entendendo

Como funciona

Uma media query aplica CSS somente quando a tela tem um certo tamanho. A abordagem mobile-first é escrever o CSS base para celular e sobrescrever para telas maiores.

Unidades relativas ajudam muito:

% — relativo ao container pai
rem — relativo ao tamanho base do navegador (16px)
vw / vh — relativo à largura/altura da janela

clamp(min, ideal, max) cria um valor que cresce com a tela mas tem limites — ótimo para texto responsivo.

/* mobile primeiro */
.container {
  padding: 16px;
  font-size: 1rem;
}

/* a partir de 768px (tablet/desktop) */
@media (min-width: 768px) {
  .container {
    padding: 40px;
    font-size: 1.125rem;
  }
}

// mão na massa

Agora é com você

Texto que muda com a tela

Crie um <h1> com font-size: 1.5rem no mobile. Usando media query, aumente para 3rem em telas maiores que 600px. Redimensione o preview para ver o efeito.

a8e1.html

<style>
  h1 {
    font-size: 1.5rem; /* mobile */
  }

  @media (min-width: 600px) {
    h1 {
      /* desktop — complete aqui */
    }
  }
</style>

<h1>Título responsivo</h1>
<p>Redimensione o preview para ver o título mudar de tamanho.</p>

Preciso de uma dica

Dentro do @media: h1 { font-size: 3rem; }

Observação: O preview do editor é pequeno — a media query de 600px pode já estar ativa dependendo do tamanho. Tente valores menores como 200px para ver o efeito no preview.

Cards que empilham no mobile

Crie 3 cards em linha no desktop. No mobile (menos de 600px), eles devem empilhar um abaixo do outro. Use Flexbox com flex-direction e media query.

a8e2.html

<style>
  .grade {
    display: flex;
    flex-direction: column; /* mobile: empilhado */
    gap: 12px;
    padding: 16px;
  }
  .card {
    padding: 20px;
    background: #f0f4ff;
    border-radius: 10px;
    border: 1px solid #c7d2fe;
  }

  @media (min-width: 600px) {
    .grade {
      /* mude para linha no desktop */
    }
  }
</style>

<div class="grade">
  <div class="card"><strong>Card A</strong><p>Conteúdo</p></div>
  <div class="card"><strong>Card B</strong><p>Conteúdo</p></div>
  <div class="card"><strong>Card C</strong><p>Conteúdo</p></div>
</div>

Preciso de uma dica

No @media: .grade { flex-direction: row; }

Texto com clamp()

Use clamp() para criar um título que cresce de 1.2rem a 3rem conforme a largura da tela. Sem precisar de media query.

a8e3.html

<style>
  h1 {
    font-size: clamp(1.2rem, 5vw, 3rem);
    font-family: sans-serif;
    margin: 20px;
  }
  p {
    margin: 0 20px;
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    color: #555;
    font-family: sans-serif;
  }
</style>

<h1>Título que cresce com a tela</h1>
<p>Esse parágrafo também muda de tamanho automaticamente.
Redimensione o preview.</p>

Observação: clamp(1.2rem, 5vw, 3rem) significa: no mínimo 1.2rem, idealmente 5% da largura da janela, no máximo 3rem. É uma das ferramentas mais elegantes do CSS moderno.

// desafio

página responsiva

Monte uma página com navbar, hero e grade de cards totalmente responsiva: no celular tudo empilha, no desktop fica em linha. Use max-width: 900px; margin: auto no container para não esticar demais em telas grandes.

a8d1.html DESAFIO

<style>
  * { box-sizing: border-box; margin: 0; padding: 0; font-family: sans-serif; }
  .wrap { max-width: 900px; margin: auto; padding: 0 16px; }
  /* complete: navbar, hero, grade, media queries */
</style>

<div class="wrap">
  <!-- seu layout aqui -->
</div>

Aula 07 Aula 09