Fazer o conteúdo caber em telas diferentes

Neste capítulo você vai conferir a página estreita e ampliar o texto sem perder controles. O objetivo é terminar uma tarefa pequena e conferir seu resultado no Mirante do Mucuripe.

Seu ponto de partida

Estude depois do capítulo 04. Retome a referência se uma experiência anterior ficou alterada. Use o exemplo 05-responsivo do pacote anexo e copie inicio/ para uma pasta de prática fora do original. A raiz do exemplo é a referência completa desta etapa. Você não precisa copiar arquivos da etapa anterior.

Abra index.html da sua cópia no navegador e o mesmo arquivo num editor de texto simples. Para mídia, ferramenta de conferência e JSON, use o teste HTTP local explicado no README. Abrir ou testar não publica a página.

Como praticar

Leia a explicação e digite ou confira o código indicado. Mude uma coisa. Anote sua previsão antes de salvar e recarregar. Compare o resultado e investigue o erro antes de avançar. Ao terminar cada experiência, restaure somente a mudança indicada, para que a próxima parta dos valores da referência. Você pode parar depois de uma lição.

A coluna pode nascer do espaço disponível

Auto-fit faz a grade criar as colunas que cabem. Minmax define um mínimo e um máximo; a referência usa min(100%, 16rem) para o mínimo nunca ultrapassar a largura do grupo. A parte de 1fr distribui o espaço restante. Essa expressão permite uma coluna estreita sem uma regra para cada aparelho. Uma página responsiva acompanha o conteúdo disponível, não uma lista de marcas de celular. Primeiro redimensione a janela e observe a troca de colunas.

Faça na sua cópia

Confira a última regra .cards da folha. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

.cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

Mude uma coisa e preveja

Troque somente 16rem por 20rem.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

Cada coluna pede mais espaço mínimo; a grade passa para menos colunas mais cedo. Restaure 16rem.

Se não acontecer

Confira os parênteses. Um parêntese ausente pode invalidar a declaração inteira, sem apagar o resto da folha.

Media query responde a uma condição

Media query é uma regra que só entra quando a condição é atendida. Max-width: 35rem considera a largura disponível; não identifica um aparelho. A referência diminui o preenchimento geral nessa faixa. A regra vem depois da apresentação geral, e a cascata decide o valor efetivo. Não espalhe várias regras iguais pela folha antes de comparar condições. Uma mudança pequena permite saber se a declaração ficou dentro das chaves corretas.

Faça na sua cópia

Localize a media query no fim da folha. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

@media (max-width: 35rem) {
  header, main, footer { padding: 1rem; }
}

Mude uma coisa e preveja

Troque somente 1rem por .75rem dentro da media query.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O preenchimento menor aparece na janela estreita; a regra geral continua nas larguras maiores.

Se não acontecer

Se mudar em toda largura, confira se a declaração ficou fora das chaves da media query.

Zoom também faz parte da conferência

Zoom de 200% amplia a página e reduz o espaço útil para organizar o conteúdo. O menu pode quebrar e os cartões podem empilhar; isso é adaptação, não defeito. Texto, campo e botão devem continuar disponíveis. Uma captura pequena não substitui essa experiência, porque não altera o cálculo da página da mesma forma. Use o menu de zoom do navegador. Depois restaure 100%. Não esconda transbordamento com overflow hidden no body: isso pode esconder a informação que precisa ser corrigida.

Faça na sua cópia

Use o menu do navegador e percorra a página. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

Zoom do navegador: 200%

Mude uma coisa e preveja

Amplie somente o zoom e percorra os links com Tab e Enter.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

Texto e links continuam alcançáveis; não aparece rolagem horizontal geral para ler os cartões.

Se não acontecer

Procure largura mínima, height fixa ou conteúdo sem quebra. Corrija a causa; não reduza o zoom para aprovar a página.

A captura mostra uma parte da referência. Abra o exemplo para conferir a página inteira. Uma experiência temporária pode produzir outra aparência; restaure os valores antes de comparar.

Atividades para fazer antes das respostas

Use uma nova cópia da base. Tente primeiro; depois compare seus resultados com os comentários.

1. Compare a grade antes e depois de mudar o mínimo da coluna.

2. Confira a media query em duas larguras.

3. Percorra a página com zoom de 200% e registre o que mudou.

Respostas comentadas

Compare o que você previu com o que observou. Uma solução diferente pode funcionar se mantiver o conteúdo e a tarefa acessíveis.

1. Um mínimo maior reduz a quantidade de colunas que cabe. O conteúdo continua na ordem e a grade ocupa a área disponível.

2. A condição controla quando a regra participa da cascata. Conferir apenas uma largura não prova que a condição está correta.

3. Registre largura, zoom e elementos alcançados. Quebra de menu e empilhamento são esperados; conteúdo cortado precisa de correção.

Quando seguir

Você confere janela estreita e zoom e distingue reorganização de perda de conteúdo. Se ainda houver dúvida, repita somente a experiência que precisa esclarecer.

O arquivo completo

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

index.html

<!doctype html>
<html lang="pt-BR">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mirante do Mucuripe | Prática de front-end</title><link rel="stylesheet" href="assets/styles.css"></head>
<body><a class="pular" href="#conteudo">Pular para o conteúdo</a>
<header><p>Um pouco além do Webdev</p><h1>Mirante do Mucuripe</h1><p class="ficticio">Espaço cultural fictício em Fortaleza.</p>
<nav aria-label="Nesta página"><a href="#sobre">Sobre</a><a href="#agenda">Agenda</a><a href="#visitar">Orientações</a></nav></header>
<main id="conteudo" tabindex="-1"><section class="hero" aria-labelledby="sobre"><h2 id="sobre">Um lugar para aprender e criar</h2><p class="selo">Projeto fictício</p><p>O Mirante do Mucuripe reúne leitura, oficinas e conversas em Fortaleza.</p><p>Esta página é uma prática de curso. Não representa um espaço real.</p></section><section aria-labelledby="agenda"><h2 id="agenda">Agenda de prática</h2><p>Horários inventados, sem reserva ou inscrição real.</p><div class="cards"><article class="card"><h3>Leitura às 10h</h3><p>Escolha um texto curto e converse sobre ele.</p></article><article class="card"><h3>Oficina às 14h</h3><p>Experimente uma mudança pequena no seu projeto.</p></article></div></section><section aria-labelledby="visitar"><h2 id="visitar">Antes de visitar</h2><p>Local fictício em Fortaleza. A descrição é apenas um exercício, sem endereço real.</p><ul><li>Leia o horário na agenda.</li><li>Confira a descrição da atividade.</li></ul></section></main><footer><p>Mirante do Mucuripe. Conteúdo fictício para estudo.</p></footer>
</body></html>