Responsivo: o portfólio no celular primeiro · CSS do zero

Por que começar pelo celular

Não é moda: é de onde vem quase todo o acesso, especialmente por aqui. E há uma razão técnica.

Escrever para a tela grande e depois desfazer para a pequena acumula exceções: float: none, width: auto, display: block; uma pilha de correções.

Escrever para a tela pequena e acrescentar é aditivo. A base é o caso mais restrito, e cada faixa maior só ganha o que aquele espaço permite.

Há ainda uma razão que é só de portfólio: o seu link vai ser aberto no celular. Alguém recebe o endereço numa mensagem, toca, e olha. Se a experiência boa é a do monitor de 27 polegadas que você usou para construir, quase ninguém vai ver essa.

A media query

/* Base: celular. Sem media query nenhuma. */
.grade {
  display: grid;
  gap: var(--espaco-3);
}

/* A partir de 640px */
@media (min-width: 640px) {
  .grade {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* A partir de 1024px */
@media (min-width: 1024px) {
  .grade {
    grid-template-columns: repeat(3, 1fr);
  }
}

Cada faixa acrescenta. Nenhuma desfaz.

Onde quebrar

Não persiga tamanhos de aparelho: a lista muda todo ano e nunca acaba.

O método: abra sua página e redimensione a janela devagar. No ponto em que o layout ficar ruim: a linha longa demais, o cartão espremido, o menu quebrando -, ali está o ponto de quebra. Ele vem do seu conteúdo.

Se você fez o exercício 6 da aula 7, já tem essa lista escrita.

Se ajudar, três faixas cobrem quase tudo:

/* 640px  - celular deitado, tablet pequeno */
/* 768px  - tablet */
/* 1024px - laptop */

O layout que não precisa de media query

Boa parte do responsivo do seu portfólio já está resolvida desde as aulas 4 a 8:

.grade {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.envelope {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--espaco-4);
}

.prosa {
  max-width: var(--medida);
}

.abertura h1 {
  font-size: clamp(2.5rem, 8vw, 6rem);
}

header nav ul {
  display: flex;
  flex-wrap: wrap;
}

O que sobra para a media query

Num portfólio bem construído, sobram três ou quatro casos - e vale conhecê-los, porque são sempre os mesmos:

/* 1. O bento, que pede o destaque de volta ao normal no celular */
@media (max-width: 560px) {
  .bento > li:first-child {
    grid-column: auto;
  }
}

/* 2. O respiro entre seções, que cabe maior no desktop */
@media (min-width: 768px) {
  section {
    margin-bottom: var(--espaco-6);
  }
}

/* 3. O menu, que numa tela muito estreita fica melhor empilhado */
@media (max-width: 480px) {
  header .envelope {
    flex-direction: column;
    align-items: flex-start;
  }
}

O menu de seis itens no celular é o ponto em que quase todo portfólio recorre a JavaScript - o botão de hambúrguer que abre e fecha. Com HTML e CSS puros, a resposta honesta é a de cima: deixe-o empilhado, ou reduza a seis palavras curtas que caibam em duas linhas. Um menu visível e feio serve melhor que um menu bonito que não abre.

Imagens

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

Três linhas, no topo da folha, que evitam o defeito mais comum: a captura de 1200px esticando a página para os lados no celular.

max-width: 100%; nunca ultrapassa o contêiner, mas também não estica uma imagem pequena até borrar;
height: auto; mantém a proporção;
display: block; tira o espaço fantasma embaixo, que vem de a imagem ser inline por padrão.

E uma quarta, para as capturas de projeto ficarem todas do mesmo tamanho na grade, mesmo tendo proporções diferentes:

.cartao img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

object-fit: cover recorta em vez de deformar. Uma captura achatada num cartão é o tipo de detalhe que quem contrata percebe sem saber que percebeu.

O alvo de toque

.acao,
header nav a,
footer nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: var(--espaco-2);
}

44 por 44 pixels é a recomendação para o que se toca com o dedo. Um link de menu com 16px de altura é fácil de acertar com o mouse e difícil com o polegar: e errar leva a pessoa para a página errada.

O peso da página

Responsivo não é só largura. Numa conexão de dados móveis, o que decide se a pessoa espera é o tamanho do que você mandou baixar.

Um portfólio de HTML e CSS puros pesa quase nada - menos de 20 KB de código. O peso todo está nas imagens:

reduza cada captura para no máximo 1200px de largura;
converta para .webp, que costuma cair a um terço do .png;
mire em menos de 300 KB por página, imagens incluídas.

Testar de verdade

Redimensione a janela devagar, do estreito ao largo.
Abra as ferramentas do navegador (F12) e ligue o modo de dispositivo.
Abra no seu celular de verdade. O emulador não simula o dedo, nem o sol na tela, nem a conexão ruim.

O terceiro é o que conta. Mande o link para você mesmo por mensagem, saia de casa, desligue o Wi-Fi e abra. É exatamente o que a pessoa do outro lado vai fazer.

No portfólio

As seis páginas passam a funcionar no aparelho de quem vai receber o link:

as três linhas de img no topo da folha;
aspect-ratio e object-fit: cover nas capturas dos cartões;
min-height: 44px nos links de menu, de rodapé e nos botões;
as três ou quatro media queries que sobraram, todas min-width, exceto as correções pontuais;
as capturas reduzidas e convertidas, abaixo de 300 KB por página.

Depois faça a conferência no aparelho: abra as seis páginas, toque em cada link do menu e do rodapé com o polegar, e role tudo. Nenhuma rolagem horizontal, nenhum toque errado.

Exercícios

Reescreva as media queries do seu portfólio no estilo mobile first, com min-width.
Conte quantas media queries a sua folha tem. Se forem mais de cinco, ache as que auto-fit ou clamp resolveriam.
Ponha as três linhas de imagem no topo da folha e teste com uma captura grande.
Ponha aspect-ratio e object-fit nas capturas e compare a grade antes e depois.
Garanta 44px de altura em todos os links do menu e do rodapé, e teste com o polegar no celular.
Abra a aba de rede das ferramentas do navegador e leia o peso total da sua página inicial. Anote o número. Depois de converter as imagens, leia de novo.

Referências

Design responsivo - MDN - media queries e as técnicas modernas
Alvos de toque - WCAG - a recomendação de 44px, e o porquê
Responsive Web Design - W3Schools - referência rápida