Adapte a página à tela e ao zoom

Neste capítulo você vai mostrar duas colunas quando há espaço e conservar leitura e navegação quando a área disponível diminui.

Seu ponto de partida

Continue depois do capítulo 08. Abra pacote de exemplos/09-responsividade. Copie inicio para uma pasta de prática. Abra index.html da cópia no navegador e no editor.

A raiz do exemplo é a referência pronta. Inicio fornece o HTML desta etapa e o CSS no estado anterior. Você modifica sua cópia e compara com a referência. Até o capítulo 11, dois cliques bastam; abrir no disco não publica a página.

Como praticar

Leia e confira as linhas indicadas. Mude uma coisa. Anote sua previsão, salve e recarregue. Compare com a explicação. Se não funcionar, investigue o erro antes de seguir. Pare e retome quando precisar; não é necessário decorar as propriedades.

Uma coluna é o ponto de partida

A grade começa numa coluna, como foi concluída no volume anterior. Esse ponto de partida atende às áreas menores antes de acrescentar uma distribuição mais larga. Essa forma de trabalhar costuma ser chamada mobile first.

Uma media query aplica regras quando uma condição corresponde ao ambiente. Min-width: 42rem verifica se a área de apresentação do navegador tem pelo menos essa largura. Se a condição corresponder, a grade passa a ter duas colunas.

O valor 42rem é um ponto de teste para este conteúdo. Não é um número obrigatório para qualquer celular ou computador. Você precisa observar se os textos cabem com conforto.

Mantenha a regra básica .grade com uma coluna e acrescente o bloco condicional depois dela. Assim, a condição modifica apenas o que precisa mudar.

Faça no seu exemplo

Acrescente o bloco completo no fim de custom.css. Não remova a regra básica de uma coluna.

@media (min-width: 42rem) {
  .grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

Mude uma coisa e preveja

Troque somente 42rem por 60rem.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Arraste a borda da janela devagar para observar a transição. Restaure 42rem ao concluir.

Resultado esperado neste teste: Será necessário uma janela mais larga para aparecer a segunda coluna.

Se não acontecer

Não coloque a regra de uma coluna depois do bloco condicional com a mesma prioridade. Ela pode vencer pela ordem e impedir o resultado esperado.

Amplie o texto sem perder conteúdo

Zoom aumenta a apresentação e pode reduzir o espaço disponível para organizar a página. Uma página que funciona em janela larga precisa continuar utilizável quando a pessoa amplia o texto.

No navegador, use o menu de zoom e escolha 200%. Observe títulos, cartões, menu, imagem e campos. A grade pode voltar a uma coluna. Isso ajuda a manter os parágrafos legíveis, em vez de conservar duas colunas a qualquer custo.

A imagem também deve acompanhar a área de leitura. Max-width: 100% limita sua largura no contexto; height: auto conserva a proporção. Não recorte uma captura de código ou um diagrama com object-fit: cover, pois uma parte necessária pode desaparecer.

Se o menu ocupar duas linhas, confirme que cada link ainda pode ser ativado. O objetivo do teste é acesso ao conteúdo, não reproduzir uma única composição em todas as situações.

Faça no seu exemplo

Acrescente em custom.css. As regras da base já ajudam nesse comportamento; a declaração torna a intenção explícita no seu arquivo.

img {
  max-width: 100%;
  height: auto;
}

Mude uma coisa e preveja

Aumente o zoom para 200% pelo menu do navegador.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Role até o fim, navegue para Prática e teste os campos. Depois volte a 100%.

Resultado esperado neste teste: O texto fica maior, pode ocupar mais linhas e o layout deve se reorganizar sem esconder informação.

Se não acontecer

Não use overflow: hidden no cartão para esconder texto que cresceu. Investigue as dimensões e deixe a caixa ganhar altura.

Registre um teste que outra pessoa consiga repetir

Você já viu como alterar o layout. Agora precisa saber se ele continua funcional. Não basta olhar a página inicial numa janela grande.

Faça três conferências: janela estreita, janela larga e zoom de 200%. Em cada uma, percorra as duas páginas. Abra uma pergunta, leia a imagem e teste o formulário com valores fictícios.

Para testar uma largura precisa, abra as ferramentas do navegador com F12 e procure o modo de dispositivos. Se esse painel parecer confuso, comece estreitando a janela manualmente. O volume não depende de conhecer todo o painel antes de praticar.

Registre o que testou e o resultado num arquivo de notas. Um problema descrito como O último link ficou parcialmente fora da tela em 320px é mais fácil de corrigir que A página ficou estranha.

Se o CSS não se comportar como previsto, inspecione a grade e confira qual declaração de colunas está ativa. Não acrescente novas regras aleatórias até parecer funcionar.

Faça no seu exemplo

Não há código novo nesta etapa. Abra index.html e pratica.html e use a tabela de conferência no fim deste volume.

Mude uma coisa e preveja

Acrescente temporariamente uma frase longa ao primeiro cartão.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Anote condição, problema encontrado e ajuste necessário. Retire a frase depois de conferir.

Resultado esperado neste teste: A altura deve aumentar e a leitura continuar possível nas três condições de teste.

Se não acontecer

Uma captura bonita não prova que os links funcionam. Faça as ações de navegação, teclado e preenchimento além da inspeção visual.

A captura mostra um trecho da referência concluída. Role a página do exemplo para conferir o restante. Os testes temporários podem apresentar outra aparência; restaure os valores indicados antes de comparar.

Registro de conferência

Anote o navegador e a condição que realmente testou. Uma conferência local não equivale a testar todos os aparelhos.

Atividades para fazer antes das respostas

Use uma nova cópia do exemplo. Estas atividades são para aplicar o que aprendeu; tente antes de ler o comentário.

1. Faça as duas colunas aparecerem apenas a partir de 50rem.
2. Teste a imagem em janela estreita e zoom de 200%.
3. Registre um problema real ou anote que não encontrou problema nas condições testadas.

Respostas comentadas

Compare seu resultado e sua explicação. Um ajuste diferente pode funcionar, desde que cumpra a tarefa sem cortar conteúdo nem retirar acesso.

1. Modifique min-width para 50rem, mantendo uma coluna na regra básica.

2. Confira proporção, legenda e ausência de corte. Height: auto e max-width: 100% ajudam, mas é necessário observar o resultado.

3. Use condição, ação e resultado. Não escreva funciona em todos os aparelhos se testou apenas seu navegador.

Quando seguir

As duas páginas continuam utilizáveis em área estreita e com zoom, e você registra o que conferiu. Se ainda precisa de ajuda para isso, repita o teste pequeno antes de avançar.

Consulta opcional

Os links abaixo aprofundam este assunto. Você não precisa lê-los para realizar a prática com os arquivos locais. Créditos da origem e licenças ficam no README.

• Referência 1

O arquivo completo

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

app.js

const form = document.querySelector("#form-estudo");
const resultado = document.querySelector("#resultado");
const conferir = document.querySelector("#conferir");
if (form && resultado && conferir) {
  form.addEventListener("submit", (event) => {
    event.preventDefault();
    resultado.textContent =
      "Preenchimento válido no navegador. Nenhum dado foi enviado.";
  });
  form.addEventListener("reset", () => {
    resultado.textContent = "";
  });
  conferir.disabled = false;
}