Responsividade

A Oficina da Lia é um ateliê fictício de papelaria em Olinda. Neste volume você termina uma etapa pequena do site. Abra exemplos/13-responsividade/index.html. Use a cópia inicio/ para experimentar e os arquivos ao lado para comparar.

O que você vai aprender

• Começar por uma coluna.
• Acrescentar colunas quando houver espaço.

Responsividade

Há aparelho, navegador e viewport (a área que de fato mostra a página).

O meta viewport deste volume é width=device-width, initial-scale=1. Não bloqueie zoom.

Media query mobile-first: o CSS-base serve o estreito; o min-width acrescenta colunas no largo.

.grade {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 48rem) {
  .grade {
    flex-direction: row;
    align-items: flex-start;
  }
}

Telas densas podem pedir imagem @2x no fundo, com background-size travado. No conteúdo informativo, continue usando img com alt.

O exemplo 13-responsividade tem botão com transição, faixa em gradiente e duas colunas só a partir de 48rem. Redimensione a janela e tabule até um link para ver o contorno de 3px.

Pare e experimente. Copie a media query. Mude só 48rem para 60rem. Preveja se as colunas aparecerão mais cedo ou mais tarde ao alargar a janela. Recarregue, confira e restaure.

Atividades

1. Onde começa o CSS-base?
2. Quando aparecem duas colunas?
3. Por que não usar largura fixa de 1200px?
4. Qual teste falta depois de redimensionar?

Respostas comentadas

1. Na largura estreita, com uma coluna.
2. Quando a media query min-width:48rem é satisfeita pela viewport.
3. Ela pode ultrapassar a área disponível no celular ou com zoom.
4. Zoom de 200% e teclado: texto e controles precisam permanecer disponíveis.

O arquivo completo

Referência do exemplo 13-responsividade, reproduzida aqui para que você possa conferir sem sair da página.

simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",e=>{e.preventDefault();document.querySelector("#retorno").textContent="Simulacao conferida. Nada foi enviado ou guardado.";});}