Atividade de Aplicação — Web Design Responsivo

Cada rodada apresenta um problema real de responsividade. O grupo discute e decide uma única alternativa (A, B, C ou D). Quando o professor pedir, todos os grupos revelam a resposta ao mesmo tempo, erguendo o cartão da letra escolhida.

Se grupos discordarem, cada lado defende sua escolha antes do professor fechar a rodada.

Rodada 1 — Layouts Fluídos

Código atual de um card de produto:

.card {
  width: 320px;
  padding: 24px;
  margin: 16px;
  border: 1px solid #ccc;
}
.card-title {
  font-size: 32px;
}

O card fica cortado em celulares com tela de 280px de largura. Qual alternativa resolve o problema sem quebrar a proporção visual do card?

A) Trocar width: 320px por width: 100% e manter o restante em px

B) Remover a propriedade width e adicionar display: flex

C) Trocar width: 320px por max-width: 100%, e os demais valores (exceto a border) por rem

D) Trocar todas as unidades, inclusive a border, para vw

Rodada 2 — Mídias Fluídas

Uma página tem uma foto de produto com width: 600px fixo, que estoura a tela no celular. Tem também um ícone decorativo que precisa ficar nítido em qualquer tamanho de tela, inclusive em telas de alta resolução.

Qual combinação resolve os dois problemas?

A) max-width: 100% na foto e usar SVG para o ícone

B) width: 600px fixo na foto e usar PNG para o ícone

C) min-width: 100% na foto e manter o ícone em GIF

D) height: 100% na foto e converter o ícone para PDF

Rodada 3 — Media Queries

Base do menu: nav { display: flex; }. Ele deve ficar em coluna em telas de até 600px de largura, e em linha (padrão) em telas maiores.

Qual media query implementa isso corretamente?

A) @media (min-width: 600px) { nav { flex-direction: column; } }

B) @media (orientation: portrait) { nav { flex-direction: row; } }

C) @media (height: 600px) { nav { flex-direction: column; } }

D) @media (max-width: 600px) { nav { flex-direction: column; } }

Rodada 4 — Diagnóstico Combinado

main {
  display: flex;
  width: 1024px;
}
aside {
  flex-grow: 1;
}

Em celulares (telas menores que 1024px), aparece rolagem horizontal e o conteúdo fica cortado. Qual alternativa resolve o problema combinando layout fluído e media query?

A) Trocar width: 1024px por width: 100vw e não usar media query

B) Trocar width: 1024px por max-width: 1024px e adicionar @media (width <= 600px) { main { flex-direction: column; } }

C) Manter width: 1024px e adicionar overflow-x: hidden no body

D) Remover display: flex e usar apenas float: left

Rodada 5 — Viewport

O site funciona bem no desktop, mas no celular aparece minúsculo, como se o navegador estivesse forçando uma largura de 980px. O <head> do HTML não tem nenhuma tag de viewport.

Qual alternativa resolve o problema?

A) Adicionar body { zoom: 200%; } no CSS

B) Adicionar @media (max-width: 980px) { body { width: 100%; } }

C) Adicionar <meta name="viewport" content="width=device-width, initial-scale=1.0"> no <head>

D) Adicionar <meta charset="UTF-8"> no <head>

Caso Final — Padaria Bela Vista

O site da Padaria Bela Vista tem 4 problemas de responsividade, um em cada trecho abaixo. Para cada trecho, o grupo escolhe a correção certa. As respostas são reveladas trecho por trecho.

Trecho 1 — Container principal

.container {
  width: 1200px;
  margin: 0 auto;
}

Problema: no celular aparece rolagem horizontal.

A) Remover margin: 0 auto

B) Trocar margin por padding

C) Trocar width: 1200px por max-width: 1200px; width: 100%;

D) Trocar width: 1200px por width: 1200vw

Trecho 2 — Logo

.logo {
  width: 400px;
}

Problema: o logo (um arquivo .svg) fica cortado no celular.

A) Converter o SVG para JPG

B) Adicionar height: 400px fixo também

C) Remover a tag <img>

D) Trocar width: 400px por max-width: 100%

Trecho 3 — Menu

.menu {
  display: flex;
}

Problema: em telas pequenas os itens do menu ficam espremidos e ilegíveis.

A) @media (min-width: 480px) { .menu { flex-direction: row; } }

B) @media (max-width: 480px) { .menu { flex-direction: column; } }

C) @media (orientation: landscape) { .menu { display: none; } }

D) Remover display: flex

Trecho 4 — <head> do site

<head>
  <meta charset="UTF-8" />
  <title>Padaria Bela Vista</title>
</head>

Problema: no celular o site aparece minúsculo, como se tivesse um zoom out automático.

A) Adicionar <meta name="viewport" content="width=device-width, initial-scale=1.0">

B) Adicionar <meta name="mobile" content="true">

C) Trocar <title> por <h1>

D) Adicionar viewport: 100% no CSS

Fechamento

Cada grupo aponta, em uma frase, qual pilar do RWD gerou mais discussão dentro da equipe e por quê.