Design responsivo

O design responsivo permite que uma página HTML se adapte conforme o espaço disponível muda. Um celular na vertical, um tablet na horizontal e uma janela de computador redimensionada devem mostrar texto legível, controles utilizáveis e imagens que caibam na tela. Você projeta para uma faixa contínua de larguras, incluindo os espaços entre tamanhos conhecidos de dispositivos.

Ethan Marcotte introduziu o termo em 2010 em torno de três técnicas: layouts fluidos, imagens flexíveis e consultas de mídia. Flexbox, grade, consultas de contêiner e marcação de imagens responsivas agora ampliam esse conjunto de ferramentas. Cada uma resolve uma parte diferente do trabalho; uma página precisa de mais de uma única configuração.

Conte os pixels certos

Um pixel CSS é uma unidade de layout, não necessariamente um ponto na tela. O CSS define 96px como equivalente a 1in; em uma tela, essa relação não garante uma polegada física medida. Uma tela de alta densidade usa vários pixels do dispositivo para cada pixel CSS. A razão de pixels do dispositivo descreve essa relação.

Um celular de 390 pixels CSS de largura com razão 3 tem 1170 pixels do dispositivo na largura. Uma consulta de largura ainda vê 390px. Os pontos extras ajudam a desenhar textos e imagens nítidos; eles não dão ao layout três vezes mais espaço. Essa distinção importa quando você escolher arquivos de imagem mais adiante.

A área de visualização é a área do navegador usada para exibir a página, excluindo suas próprias barras de ferramentas. Redimensionar uma janela ou girar um dispositivo altera o espaço disponível. Em celulares, mostrar e ocultar as barras de ferramentas também pode mudar a altura visível.

Informe aos navegadores móveis a largura pretendida

Os navegadores móveis podem organizar uma página sem configuração em uma área de visualização virtual larga, normalmente em torno de 980 pixels CSS, e depois reduzi-la para caber na tela. Em um celular de 390px, a escala é de cerca de 0,4. Um texto declarado com 16px parece então ter cerca de 6,4px de altura, e uma consulta para largura estreita pode nunca corresponder, pois a área de visualização do layout ainda é larga.

Coloque isto dentro do <head> do documento:

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width solicita a largura do dispositivo em pixels CSS. initial-scale=1 inicia com zoom normal. Depois de adicioná-la, recarregue a página em uma visualização de navegador do tamanho de um celular e verifique tanto o texto quanto as consultas de largura ativas.

Mantenha o zoom disponível. Não adicione user-scalable=no ou maximum-scale=1. Leitores com baixa visão precisam ampliar o conteúdo; o texto deve permitir ampliação para 200% sem perda de conteúdo ou funcionalidade. Alguns navegadores móveis ignoram restrições de zoom, mas a própria página deve oferecer suporte ao zoom.

Verifique também o layout

A tag da área de visualização não altera uma caixa de largura fixa. Uma .page com width: 960px ainda ultrapassa uma área de visualização de 390px. Transforme larguras rígidas em larguras fluidas com limites, torne as mídias flexíveis e adicione mudanças de layout onde o conteúdo precisar.

Para diagnosticar uma página minúscula no celular, primeiro inspecione o <head> em busca da tag da área de visualização. Para diagnosticar uma página de tamanho normal que rola lateralmente, inspecione as caixas que ultrapassam a largura disponível. Esses sintomas apontam para causas diferentes.

Escolha uma unidade perguntando qual referência a dimensão deve acompanhar. Uma coluna geralmente acompanha seu bloco de referência. O preenchimento interno de um botão pode acompanhar seu texto. O comprimento da linha de um parágrafo acompanha a fonte. Usar a referência adequada faz as mudanças funcionarem em conjunto.

Porcentagens e o modelo de caixa

Uma caixa com width: 50% tem 300px de largura em um bloco de referência de 600px e 180px em um de 360px. Preenchimentos internos e margens em porcentagem, incluindo os valores superior e inferior, também usam a largura do bloco de referência na escrita horizontal comum. Assim, padding-top: 10% em um elemento pai de 600px de largura equivale a 60px.

A altura é diferente. Uma altura percentual precisa de uma altura de referência definida. Quando a altura de um elemento pai comum vem de seu conteúdo, height: 50% geralmente se comporta como auto. Deixe as caixas de texto crescerem com seu conteúdo em vez de usar alturas percentuais para controlá-las.

Use um contêiner fluido com um máximo:

.page {
  box-sizing: border-box;
  width: 100%;
  max-width: 70rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

Em uma tela estreita, a caixa preenche a largura disponível, com o preenchimento interno dentro dela. Em uma tela larga, ela para em 70rem e as margens automáticas na direção em linha a centralizam. Com 16px no elemento raiz, sua largura externa máxima é 1120px. border-box inclui o preenchimento interno e as bordas na largura declarada; com content-box, a largura de 100% mais o preenchimento interno transbordaria. Uma width: 70rem fixa também impediria a caixa de encolher.

Por exemplo, um elemento envolvente border-box de 340px de largura com 16px de preenchimento interno em cada lado deixa 308px para seu conteúdo quando não há borda. A largura declarada descreve a parte externa dessa caixa. Se você mudar a mesma declaração para content-box, apenas o conteúdo terá 340px e a largura externa passará a ser 372px. Inspecionar essas larguras separadas nas ferramentas do desenvolvedor facilita a identificação de transbordamentos relacionados ao preenchimento interno.

Deixe as configurações de texto se propagarem

Deixe o tamanho de fonte do elemento raiz no padrão do leitor ou use uma porcentagem como 100%. Com 16px no elemento raiz, 1.5rem equivale a 24px; com 20px, equivale a 30px. Uma definição fixa html { font-size: 16px; } impede que a preferência de fonte padrão se propague para as dimensões relativas ao elemento raiz.

Para font-size, em usa o tamanho de fonte do elemento pai. Listas aninhadas, cada uma definida com 1.2em, acumulam esse efeito: 16px se tornam 19,2px e depois 23,04px. Use rem quando todos os níveis de aninhamento devem manter o mesmo tamanho.

Em outras propriedades, em usa o tamanho de fonte do próprio elemento. Um botão com padding: 0.5em 1em ganha preenchimento interno à medida que seu texto cresce. Isso mantém o espaçamento proporcional sem um ponto de quebra separado.

Para parágrafos, max-width: 65ch fornece um limite útil de leitura. A unidade mede a largura de “0”, então não conta caracteres exatamente em uma fonte proporcional. Uma orientação comum de leitura é ter cerca de 45–75 caracteres por linha; verifique a fonte e o texto reais no navegador.

Unidades relativas à área de visualização acompanham a área de visualização do navegador mesmo quando um elemento está dentro de uma caixa menor. 1vw é 1% da largura da área de visualização; 1vh é 1% de sua altura. vmin usa a menor dimensão e vmax usa a maior. Em uma área de visualização de 800px de largura, 50vw equivale a 400px. Em uma área de 300px de altura, 70vh equivale a 210px.

Essa referência importa. Uma barra lateral pode ter apenas 260px de largura em uma janela de 1400px. Um elemento filho com width: 50vw pede 700px, então não caberá nessa barra lateral. Use uma porcentagem quando o elemento filho deve acompanhar o elemento pai. Para um bloco comum de largura total, prefira width: 100%: 100vw pode incluir a largura da barra de rolagem de um computador e criar rolagem lateral.

Escolha a altura móvel pretendida

As barras de ferramentas do navegador móvel podem reduzir a área visível da página. As unidades de altura da área de visualização distinguem três estados:

A unidade vh corresponde à área de visualização grande. Também existem variantes de largura, como svw, lvw e dvw. Para uma seção inicial alta, min-height: 100svh define um mínimo estável e permite que conteúdos mais longos cresçam. Uma height fixa deixa o conteúdo transbordar quando ele fica mais alto. Unidades dinâmicas podem acompanhar mudanças nas barras de ferramentas, mas as atualizações podem acontecer em etapas e fazer o layout se mover.

Escolha a referência de altura conforme o comportamento necessário. Uma seção inicial estável pode usar a área de visualização pequena mesmo depois que as barras de ferramentas desaparecem; ela não precisa se esticar novamente só porque mais espaço fica visível. Um painel destinado a acompanhar essa mudança de espaço pode usar unidades dinâmicas, aceitando o possível movimento. Em ambos os casos, uma altura mínima permite que conteúdo adicional estenda a seção no fluxo normal.

Defina limites para um valor fluido

min() seleciona o menor valor e pode limitar uma largura: width: min(100%, 40rem) preenche o elemento pai até atingir 40rem. max() seleciona o maior valor e fornece um limite inferior. clamp() fornece um limite inferior, um valor preferido e um limite superior, nessa ordem.

.title {
  font-size: clamp(1rem, 0.5rem + 2vw, 2rem);
}

Com 16px no elemento raiz, o limite inferior é 16px, o tamanho preferido é 8px mais 2% da largura da área de visualização e o limite superior é 32px. Veja os limites:

1. Em 375px, o tamanho preferido é 15,5px, então o mínimo de 16px se aplica.
2. Em 1000px, o tamanho preferido é 28px, dentro dos limites.
3. Em 1400px, o tamanho preferido é 36px, então o máximo de 32px se aplica.

As mesmas funções aceitam cálculos como min(100% - 2rem, 70rem). Mantenha valores de comprimento compatíveis e espaços ao redor do operador de subtração.

Texto dimensionado apenas em vw pode ficar minúsculo em telas estreitas e enorme em telas largas. O zoom no computador também estreita a área de visualização em pixels CSS, o que pode anular a ampliação desse texto. Inclua uma parte relativa à fonte e limites úteis e teste a ampliação do texto: uma expressão mista de rem/vw por si só não garante um aumento completo para 200%.

Uma consulta de mídia aplica CSS quando uma condição sobre a saída, a área de visualização ou as preferências do leitor é verdadeira. O navegador verifica novamente quando as condições relevantes mudam, então redimensionar uma janela pode alterar os estilos sem recarregar a página.

.heading { font-size: 1.25rem; }

@media (min-width: 40em) {
  .heading { font-size: 2rem; }
}

Com o padrão usual de 16px do navegador, 40em equivale a 640px. O título maior se aplica a partir dessa largura. Em consultas de mídia, em e rem usam o tamanho inicial de fonte do navegador, e não um tamanho definido pelo autor em <html>. Para um leitor com padrão de 20px, a mesma mudança ocorre em 800px.

Leia as condições com precisão

min-width inclui seu limite: 600px corresponde a min-width: 600px. max-width também inclui seu limite. A sintaxe de intervalos torna a comparação explícita:

@media (width >= 600px) { /* wider layout */ }
@media (600px <= width < 900px) { /* middle band */ }

Se você combinar max-width: 600px com min-width: 600px, ambas corresponderão em 600px. Usar 599px e 600px deixa uma lacuna em larguras fracionárias, como 599,5px. Consultas de largura mínima crescente evitam essa lacuna; intervalos complementares, como < 600px e >= 600px, são outra opção.

Os tipos de mídia identificam a saída: screen, print ou o padrão all. @media print pode remover a navegação e usar texto escuro em papel branco. As condições se combinam de maneiras úteis:

only não tem efeito útil nos navegadores atuais. Largura e altura descrevem a área de visualização; orientation: portrait significa que sua altura é pelo menos igual à largura. Outras características verificam precisão de entrada, passagem do ponteiro, resolução, movimento reduzido e esquema de cores. Uma área de visualização na orientação paisagem não indica se o leitor tem um mouse.

Em uma condição prática, @media (hover: hover) and (pointer: fine) exige uma entrada principal capaz de passar o ponteiro sobre elementos e apontar com precisão. Uma janela estreita controlada por mouse pode corresponder a ela, enquanto um dispositivo largo que usa principalmente toque pode não corresponder. Use a consulta para efeitos opcionais de ponteiro; mantenha a ação principal disponível pelos controles normais da página.

Observe a cascata

Uma consulta de mídia não aumenta a especificidade de um seletor. Em uma folha de estilo comum com regras de mesma especificidade, a última declaração correspondente prevalece. Se a regra básica .heading aparecer depois da regra para telas mais largas acima, ela também prevalecerá em larguras maiores. Coloque as regras básicas primeiro e as consultas que as alteram depois.

Você também pode associar uma condição em HTML. <link rel="stylesheet" href="print.css" media="print"> aplica suas regras na impressão, mas um navegador ainda pode baixar o arquivo com prioridade menor. O atributo media de um elemento <source> usa condições para escolher uma origem de imagem.

O CSS com prioridade para dispositivos móveis começa com o layout estreito como regras comuns fora de qualquer consulta. Consultas de largura mínima acrescentam mudanças quando o espaço permite. Isso combina com o fluxo normal do documento: os blocos já são empilhados verticalmente, então a página básica geralmente precisa de pouco código de layout.

O CSS com prioridade para telas de computador começa com regras para telas largas e usa consultas de largura máxima para desfazê-las. Ambas as abordagens podem funcionar, mas a prioridade para dispositivos móveis geralmente torna a base e cada mudança posterior mais fáceis de acompanhar.

Comece com uma coluna

.cards {
  display: grid;
  gap: 1rem;
}

@media (min-width: 40em) {
  .cards { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 64em) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

Com o padrão de 16px, as mudanças acontecem em 640px e 1024px. Uma área de visualização de 500px mostra uma coluna. Em 800px, a primeira consulta corresponde e produz duas colunas. Em 1200px, ambas as consultas correspondem; a regra posterior produz três colunas.

A consulta para larguras maiores não desativa a consulta anterior. Se você inverter a ordem delas, a regra de 40em ficará por último e reduzirá o layout largo para duas colunas. Mantenha as consultas de largura mínima em ordem crescente quando elas alterarem a mesma propriedade com a mesma especificidade.

Encontre o ponto de quebra no conteúdo

Um ponto de quebra é onde uma consulta altera o layout. Comece com o conteúdo real em uma janela estreita e aumente sua largura lentamente. Procure quebras inadequadas na navegação, parágrafos que ficam longos demais ou cartões que se esticam além de uma largura útil para leitura. Adicione uma mudança onde ela melhorar esse conteúdo.

Não escolha um ponto de quebra só porque um dispositivo conhecido tem aquela largura. As telas variam, janelas de computador podem ter qualquer tamanho e uma fonte maior pode fazer a mesma navegação precisar de mais espaço. Pontos de quebra em unidades relativas podem ajudar o layout a responder ao tamanho padrão de texto do leitor.

Após cada mudança, teste os dois lados do ponto de quebra e várias larguras entre as mudanças. Um layout que parece correto apenas em 375px, 768px e 1280px ainda tem muitas oportunidades de falhar. Larguras fluidas, quebra de linha e colunas automáticas de grade cuidam de grande parte desse espaço intermediário.

Teste a navegação e a lista de cartões juntas depois de adicionar uma barra lateral à página. A janela ficou mais larga, mas a coluna principal pode ter ficado mais estreita porque agora compartilha esse espaço. Um layout de cartões que funcionava logo abaixo do ponto de quebra da página pode falhar logo acima dele. Esse é um bom caso para deixar os cartões quebrarem a linha ou se ajustarem a colunas automáticas, enquanto a própria página usa uma consulta explícita.

Mantenha o conteúdo e os downloads úteis

Usuários de celular também precisam do conteúdo da página. Se uma explicação secundária ocupar espaço demais, empilhe-a mais abaixo ou coloque-a em um controle nativo de expansão e recolhimento <details> que os leitores possam abrir. Não remova informações necessárias apenas para deixar uma captura de tela estreita mais organizada.

Começar com uma tela estreita também ajuda você a escolher uma página padrão leve. Ocultar uma imagem grande com CSS não impede seu download de forma confiável; use marcação de imagens responsivas para oferecer arquivos adequados. Uma página legível de uma coluna com uma imagem menor é um bom ponto de partida; layouts mais largos acrescentam espaço e reorganizam o conteúdo.

Um layout pode se adaptar por meio de uma consulta explícita ou de suas próprias regras de dimensionamento. Use uma consulta quando a disposição precisar mudar em um ponto escolhido. Use um layout intrínseco quando os itens simplesmente precisarem caber no espaço disponível.

Deixe a grade determinar o número de colunas

.tiles {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1rem;
}

Com 16px no elemento raiz, cada coluna procura ter pelo menos 240px. A grade encaixa o máximo possível, subtrai os espaçamentos e depois divide a largura restante com 1fr. Em um contêiner de 1000px, quatro colunas de 240px mais três espaçamentos de 16px precisariam de 1008px, então cabem apenas três. Cada uma recebe cerca de 322,7px. Um contêiner de 700px recebe duas colunas de 342px; um de 360px recebe uma.

O min(15rem, 100%) interno importa quando o contêiner tem menos de 240px de largura. Ele permite que o mínimo passe a ser a largura disponível. Sem ele, o mínimo de 240px forçaria o transbordamento. auto-fit recolhe trilhas vazias, permitindo que poucos itens se expandam; auto-fill mantém trilhas vazias e pode deixar esses itens mais estreitos.

Deixe os itens flexíveis quebrarem a linha

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.links > * { flex: 1 1 15rem; }

Cada item começa com uma base de 15rem, pode encolher ou crescer e passa para outra linha quando a linha não comporta mais itens. Cada linha divide seu próprio espaço restante. Assim, dois itens na última linha podem ficar mais largos que os itens acima. A grade é mais adequada quando as larguras das colunas devem ficar alinhadas entre linhas. A navegação também pode quebrar a linha, ou uma consulta pode mudar seu flex-direction para column.

Mude a página inteira quando necessário

Comece a página em fluxo normal. Depois, adicione uma disposição com barra lateral:

@media (min-width: 48em) {
  .page {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: 1rem;
  }
}

Com o padrão usual de 16px, isso começa em 768px. A primeira coluna é a barra lateral; a segunda ocupa o espaço restante. O mínimo zero permite que a trilha principal encolha; seu conteúdo ainda precisa quebrar a linha ou rolar adequadamente. Áreas nomeadas de grade podem expressar uma disposição mais complexa.

Mantenha o HTML em uma ordem de leitura coerente. A propriedade flexível order e o posicionamento na grade mudam onde os elementos aparecem, mas o foco do teclado e os leitores de tela ainda seguem a ordem no código-fonte. Teste percorrendo os links com a tecla Tab depois de reorganizá-los.

Uma tabela de dados larga pode precisar de sua estrutura bidimensional. Coloque-a em um elemento envolvente com rolagem local, usando overflow-x: auto, tabindex="0", role="region" e um nome acessível, como aria-label="Event schedule". Apenas a região da tabela deve rolar lateralmente; a página ao redor ainda deve se reorganizar.

Uma consulta de largura da área de visualização dá a mesma resposta para todos os componentes de uma página. Isso pode ser inadequado para um cartão reutilizável: a janela pode ter 1400px de largura enquanto a barra lateral oferece apenas 300px ao cartão. Uma consulta de tamanho do contêiner mede o espaço disponível de um ancestral, para que o cartão possa se adaptar ao espaço que realmente ocupa.

Declare um elemento envolvente e estilize seu conteúdo

<div class="card-wrap">
  <article class="card">...</article>
</div>

.card-wrap { container-type: inline-size; }
.card { display: grid; gap: 1rem; }

@container (min-width: 25rem) {
  .card { grid-template-columns: 8rem minmax(0, 1fr); }
}

Na escrita horizontal, inline-size é a largura. Ele declara que o elemento envolvente pode responder a consultas sobre a dimensão em linha. Com uma fonte de 16px no elemento raiz, 25rem equivale a 400px. Um cartão em um elemento envolvente de 300px permanece empilhado; outro em um de 500px coloca a imagem ao lado do texto. Ambos podem estar na mesma página ao mesmo tempo.

Uma consulta mede um ancestral do elemento que está sendo estilizado. Se você colocar container-type apenas em .card e depois tentar alterar esse mesmo cartão, a consulta ainda procurará acima dele. Use um elemento envolvente como caixa de medição e o cartão interno como caixa estilizada.

Selecione o ancestral pretendido

Uma consulta de tamanho sem nome usa o contêiner de tamanho ancestral adequado mais próximo. Em um layout aninhado, pode ser um elemento envolvente interno. Um nome permite escolher um ancestral específico:

.panel { container: sidebar / inline-size; }

@container sidebar (width >= 30rem) {
  .panel-title { font-size: 1.5rem; }
}

A forma abreviada define o nome e o tipo. Se não houver um ancestral adequado, a consulta não corresponderá; os estilos básicos continuarão sendo aplicados. As condições podem usar intervalos e operadores lógicos como and, or e not.

Garanta que o contêiner receba seu tamanho

A contenção impede que a dimensão consultada dependa do próprio conteúdo que a consulta pode reestilizar. Coloque container-type em uma caixa cuja largura venha do layout do elemento pai, como um bloco, uma área de grade ou um item flexível que cresce. Uma caixa que encolhe para se ajustar ao conteúdo pode colapsar quando seu conteúdo deixa de contribuir para sua dimensão em linha.

container-type: size oferece suporte a consultas de largura e altura, mas também aplica contenção ao dimensionamento em bloco. Sua altura precisa de um dimensionamento independente; caso contrário, pode colapsar. Para cartões comuns, inline-size permite que a altura continue acompanhando o conteúdo. O padrão normal não estabelece um contêiner para consultas de tamanho.

As características de tamanho incluem largura, altura, dimensão em linha, dimensão em bloco, proporção entre largura e altura e orientação, desde que o tipo de contêiner escolhido ofereça suporte às dimensões envolvidas. Os principais navegadores atuais oferecem suporte a consultas de tamanho. Mantenha um layout básico empilhado e utilizável para que o cartão ainda funcione se um navegador ignorar o aprimoramento.

Uma página responsiva pode combinar três abordagens: reorganização automática, condições da área de visualização e condições do componente. Decida de quais informações o layout precisa antes de escolher uma consulta.

Dimensione dentro de um contêiner

Unidades relativas ao contêiner de consulta descrevem porcentagens de um contêiner ancestral adequado. cqw e cqh usam largura e altura. cqi e cqb usam as dimensões em linha e em bloco. cqmin e cqmax usam a menor e a maior das duas dimensões. Na escrita horizontal, a dimensão em linha é a largura.

Em um contêiner adequado de 400px de largura, 5cqi equivale a 20px. Em um de 600px de largura, equivale a 30px. Isso permite que um título acompanhe seu próprio componente, mesmo quando a página inteira mantém a mesma largura.

Mantenha limites para o texto:

.card-wrap { container-type: inline-size; }
.card h2 {
  font-size: clamp(1rem, 4cqi, 1.5rem);
}

Com 16px no elemento raiz, um elemento envolvente de 300px produz um valor preferido de 12px, então o mínimo de 16px se aplica. Em 600px, 4cqi equivale a 24px, igual ao limite superior. Elementos envolventes mais largos não podem fazer o título ultrapassar 24px. Teste a ampliação e o redimensionamento do elemento envolvente; o texto fluido ainda precisa permanecer utilizável quando os leitores usam zoom.

As unidades relativas ao contêiner escolhem o ancestral adequado mais próximo para a direção medida. Se não existir um, elas usam como alternativa unidades da área de visualização pequena. Portanto, esquecer container-type pode fazer o texto mudar com a janela enquanto parece funcionar. Inspecione os ancestrais quando uma dimensão parecer acompanhar o espaço errado. Um nome de contêiner em uma consulta não redireciona, por si só, todas as unidades relativas ao contêiner para esse ancestral nomeado.

Combine as ferramentas

Uma página pode mudar para colunas de barra lateral e conteúdo principal em 48em por meio de uma consulta de mídia. Dentro da área principal, uma grade automática pode encaixar tantos cartões quanto o espaço permitir. A consulta de contêiner do próprio cartão pode mover sua imagem para o lado do texto apenas quando aquele espaço específico for largo o suficiente.

Não substitua uma consulta de movimento reduzido ou de passagem do ponteiro por uma consulta de contêiner. As dimensões de uma caixa não revelam as preferências do leitor nem seu dispositivo de entrada. Da mesma forma, copiar as regras de um cartão para consultas separadas da área de visualização em cada espaço da página vincula esse componente reutilizável a cada layout ao redor. Deixe que seu espaço local determine quando sua disposição muda.

Uma imagem pode ser mais larga que o espaço que o layout oferece a ela. Comece com uma regra que permita que ela encolha preservando suas proporções:

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

max-width limita a largura exibida à do contêiner sem forçar uma imagem pequena a preenchê-lo. width: 100% esticaria um logotipo pequeno até a largura total. A altura automática preserva a proporção entre largura e altura conforme a largura muda.

Reserve o espaço antes do download

Mantenha os atributos de dimensão no HTML:

<img src="coast.jpg" width="1200" height="800"
     alt="A rocky coast with a walking path">

Essas dimensões fornecem uma proporção de 3:2, para que o navegador possa reservar espaço antes de o arquivo chegar. Quando o CSS exibe a imagem com 360px de largura, a altura correspondente é 240px. Remover os atributos porque a imagem é responsiva faz perder essa informação antecipada de tamanho. O CSS ainda pode exibir a imagem menor que as dimensões dos atributos.

Para um reprodutor de vídeo incorporado, dê à caixa sua própria proporção:

iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

Isso mantém a proporção 16:9 do reprodutor enquanto sua largura muda. Para texto, deixe a altura depender do conteúdo; uma proporção fixa é útil para caixas de mídia com formato conhecido.

Escolha se o recorte é permitido

Uma miniatura de cartão frequentemente precisa preencher uma caixa uniforme. Defina uma largura e uma proporção para ela e escolha como a imagem de origem se ajusta:

.thumbnail {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top;
}

cover preenche a caixa e recorta as partes que se estendem para fora dela. contain mostra a imagem inteira e pode deixar faixas vazias. O padrão fill estica a imagem até preencher a caixa, o que pode distorcê-la. object-position escolhe o alinhamento usado no ajuste; neste exemplo, o alinhamento superior mantém a parte de cima visível.

Para uma comparação concreta, coloque uma foto de 400 × 200 em uma miniatura de 320 × 240. Cover a redimensiona para 480 × 240 e depois recorta 160px no total da largura redimensionada. Contain a redimensiona para 320 × 160, deixando 80px de altura não usada no total. Ambos preservam as proporções da imagem de origem; a escolha depende de a caixa precisar ser preenchida ou de a imagem inteira precisar permanecer visível.

Imagens que transmitem conteúdo devem estar em <img> com texto alternativo útil. Fundos CSS são adequados à decoração; background-size: cover pode recortá-los para preencher a caixa, e consultas de mídia podem trocar o arquivo de fundo.

Para imagens abaixo da primeira tela, loading="lazy" pode adiar a busca até o leitor se aproximar delas. Deixe a imagem principal inicial com carregamento imediato para que apareça rapidamente. Reduzir uma foto de 4000 pixels com CSS ainda exige o download dessa foto; é necessária marcação de imagens responsivas para escolher um arquivo menor.

Uma foto pode ter vários arquivos com o mesmo conteúdo e as mesmas proporções, mas com dimensões em pixels diferentes. A alternância de resolução permite que o navegador escolha um arquivo com base no tamanho de exibição, na densidade da tela e em suas decisões de carregamento. Ela evita o consumo desnecessário de dados e mantém detalhes suficientes.

Tamanho de exibição fixo: descritores de densidade

<img src="logo-200.png"
     srcset="logo-200.png 1x, logo-400.png 2x"
     width="200" height="80" alt="Northwind Books">

O logotipo é exibido com 200 pixels CSS de largura. O arquivo de 200 pixels é adequado a uma tela com razão 1; o arquivo de 400 pixels fornece dois pixels de origem por pixel CSS exibido para a razão 2. Essa forma usa descritores x e não precisa do atributo sizes.

Tamanho de exibição variável: descritores de largura

<img src="park-800.jpg"
     srcset="park-480.jpg 480w,
             park-800.jpg 800w,
             park-1600.jpg 1600w"
     sizes="(min-width: 64em) 50vw, 100vw"
     width="1600" height="1000"
     alt="Trees around a park pond">

Cada valor w deve informar a largura real do arquivo em pixels. Ele não define uma largura CSS. O CSS ainda controla a caixa, e sizes descreve ao navegador a largura de exibição pretendida.

A primeira condição correspondente em sizes prevalece. Com o padrão de 16px do navegador, em 1024px ou mais o espaço da imagem é de 50vw; abaixo disso, é de 100vw. A última medida, sem condição, é a alternativa. As medidas podem usar unidades relativas à área de visualização, unidades de pixel ou de fonte e cálculos como calc(100vw - 2rem), mas não porcentagens. Quando sizes está ausente com descritores de largura, o navegador normalmente presume 100vw.

Calcule os detalhes necessários

Multiplique a largura de exibição informada pela razão de pixels do dispositivo. Para escolher o menor arquivo suficiente, compare esse valor com as larguras dos arquivos fornecidos:

1. Uma área de visualização de 1200px com razão 1 usa o espaço de 50vw: 600 pixels CSS. O arquivo de 800w é o primeiro suficientemente grande.
2. Uma área de visualização de 390px com razão 3 usa 390 pixels CSS. Ela precisa de 1170 pixels de origem, então 1600w atende ao valor necessário.
3. A mesma área estreita com razão 2 precisa de 780 pixels de origem, o que 800w atende.

Navegadores reais podem reutilizar um arquivo maior em cache ou favorecer um menor em condições de carregamento limitadas. A marcação fornece opções e informações de tamanho, não uma ordem incondicional para buscar um arquivo exato.

Os navegadores começam a buscar imagens antes de o layout CSS completo estar disponível. Por isso, a indicação de tamanho deve ficar no HTML. Se o CSS der a uma imagem metade da área de visualização, mas sizes informar 100vw, o navegador poderá buscar um arquivo grande demais. Atualize sizes quando o layout mudar. Mantenha src como alternativa e use um único texto alt. Recortes diferentes precisam de <picture>, pois as opções comuns de resolução devem ser versões intercambiáveis da mesma imagem.

Reduzir as dimensões em pixels de uma foto mantém a mesma composição. Às vezes, um celular precisa de uma composição diferente: uma foto ampla de um palco pode tornar a pessoa palestrando pequena demais para ser reconhecida. A direção de arte altera o recorte ou a imagem para que o assunto principal permaneça claro.

O elemento <picture> fornece opções de origem ordenadas, seguidas por um <img> obrigatório:

<picture>
  <source media="(min-width: 50em)"
          srcset="stage-wide.jpg" width="1600" height="900">
  <img src="stage-close.jpg" width="800" height="1000"
       alt="A speaker presenting on stage">
</picture>

Com o padrão de 16px, o recorte amplo é selecionado a partir de 800px; abaixo disso, a imagem usa o recorte mais fechado. O <img> continua sendo o elemento exibido. Ele fornece a alternativa e o texto alternativo, e é o elemento estilizado pelo seu CSS de imagem. Um <picture> sem <img> não exibe nenhuma imagem.

Coloque as condições mais específicas primeiro

O navegador escolhe a primeira origem compatível cujas condições correspondem. Suponha que você ofereça recortes em 30em e 60em. Liste primeiro o mínimo de 60em, depois o de 30em e, por fim, a alternativa. Se 30em vier primeiro, ele também corresponderá a uma tela muito larga e impedirá que o navegador chegue a 60em. Intervalos sem sobreposição também podem deixar clara a escolha pretendida.

A condição media de uma origem é uma instrução de seleção. Em comparação, as opções comuns de srcset e sizes fornecem informações para que o navegador escolha uma resolução adequada. Use direção de arte quando a composição precisar mudar; use alternância de resolução quando o conteúdo da imagem permanecer igual.

Ofereça formatos em ordem de preferência

<picture>
  <source type="image/avif" srcset="hall.avif">
  <source type="image/webp" srcset="hall.webp">
  <img src="hall.jpg" width="1200" height="800"
       alt="Rows of seats in a lecture hall">
</picture>

Um navegador que oferece suporte ao primeiro formato pode usá-lo; caso contrário, tenta a próxima opção compatível e, por fim, a alternativa JPEG. AVIF e WebP frequentemente produzem arquivos menores com qualidade visual comparável. O atributo type permite que o navegador ignore formatos incompatíveis sem baixá-los para descobrir.

Cada origem também pode oferecer várias opções de largura com seu próprio srcset e sizes. Isso combina um recorte ou formato escolhido com a alternância de resolução. Quando recortes definidos pela direção de arte têm proporções diferentes, atributos de dimensão nas origens permitem que o navegador reserve o espaço adequado para cada recorte.

Escreva o texto alternativo uma vez, em <img>, e garanta que ele descreva todos os recortes. Se um recorte fechado remover uma segunda pessoa, uma descrição alternativa que mencione duas pessoas deixará de ser adequada. Para uma imagem puramente decorativa, use alt="" para que ela não acrescente conteúdo falado desnecessário.

Uma página responsiva precisa ser testada em uma faixa de larguras, não apenas em alguns dispositivos conhecidos. Abra a visualização responsiva do navegador, defina uma área de visualização estreita, próxima de 320px, e arraste até uma janela larga. Observe títulos, navegação, cartões e bordas de imagens enquanto ajusta a largura. Teste imediatamente abaixo, no ponto e acima de cada ponto de quebra.

As ferramentas do desenvolvedor podem emular dimensões da área de visualização, razão de pixels do dispositivo e entrada por toque. Chrome e Edge oferecem uma barra de ferramentas de dispositivos; Firefox e Safari oferecem modos de design responsivo. A emulação é útil, mas dispositivos reais podem diferir no comportamento das barras de ferramentas, no toque, nas fontes e no desempenho. Verifique em um celular e um tablet reais nas duas orientações, além de uma janela de computador redimensionada.

Verifique o refluxo e o texto ampliado

O critério AA de refluxo das WCAG exige que conteúdo comum funcione em uma largura de 320 pixels CSS sem exigir rolagem em duas direções. Uma área de visualização de 1280px de largura com zoom de 400% fornece essa largura. Defina uma área responsiva de 320px para verificar diretamente a largura estreita e teste também o zoom real no computador para ver como a página é ampliada.

Conteúdo que precisa de um layout bidimensional, como uma tabela de dados, um mapa ou um diagrama, pode manter essa disposição. Mantenha qualquer rolagem lateral necessária dentro de sua própria região. Títulos, instruções e parágrafos ao redor ainda devem caber na largura da página.

Use conteúdo realista: um título longo, uma URL sem pontos de quebra, muitos links e texto traduzido mais extenso. Aumente também o tamanho padrão de fonte do navegador. Uma caixa que parecia espaçosa com um exemplo curto pode transbordar quando o texto cresce.

Identifique o transbordamento horizontal

Uma barra de rolagem lateral ou uma faixa vazia à direita frequentemente significa que uma caixa ultrapassa a área de visualização. Inspecione elementos suspeitos e compare as bordas de suas caixas com o limite da página. Contorne-os temporariamente:

* { outline: 1px solid red; }

Um contorno mostra as caixas sem aumentar sua largura medida. Procure larguras fixas, blocos de 100vw, imagens sem limite de largura, trilhas de grade com mínimos largos, margens negativas, textos longos e blocos de código.

Escolha a correção de acordo com a causa:

Não oculte o transbordamento horizontal da página inteira como atalho. body { overflow-x: hidden; } pode fazer a barra de rolagem desaparecer e deixar conteúdo fora do alcance do leitor.

Para uma tabela com rolagem local, teste a interação e a largura. Use o teclado para alcançar o elemento envolvente nomeado e verifique se sua rolagem horizontal revela todas as colunas. Depois, continue a tabulação até o próximo controle. A tabela pode exigir movimento lateral sem forçar o parágrafo acima ou o restante da página para a mesma área larga de rolagem.

Por fim, inspecione as requisições de imagens no painel Rede. Defina uma área de visualização do tamanho de um celular e uma razão de pixels do dispositivo alta e realista, recarregue nas condições de teste pretendidas e verifique a opção selecionada e o tamanho do arquivo. Uma imagem visualmente pequena ainda pode exigir um download grande se sua indicação sizes estiver errada.

A largura é apenas uma parte do comportamento responsivo. Um tablet largo pode usar toque; uma janela estreita de computador pode usar mouse. As páginas também precisam funcionar com zoom, texto maior, orientações diferentes e as configurações de movimento e cores preferidas pelo leitor.

Facilite o alcance dos controles

As orientações de tamanho de alvo das WCAG 2.2 AA exigem pelo menos 24 × 24 pixels CSS ou separação suficiente segundo a regra de espaçamento, com exceções como links dentro de frases. O critério de tamanho AAA usa 44 × 44 pixels CSS, também com exceções. Links de navegação maiores, com preenchimento interno, costumam ser mais confortáveis que uma linha densa de rótulos minúsculos.

Com 16px no elemento raiz, um link com texto de 16px, line-height: 1.5 e padding: 0.75rem 1rem tem uma caixa de linha de 24px mais 12px acima e abaixo: 48px de altura. Faça do próprio link a caixa clicável com preenchimento interno.

Informações essenciais não devem depender da passagem do ponteiro. Mantenha ações visíveis ou acessíveis por toque e foco do teclado. Adicione efeitos opcionais de passagem do ponteiro apenas quando a entrada principal oferecer suporte a eles:

@media (hover: hover) and (pointer: fine) {
  .card:hover { outline: 2px solid currentColor; }
}

pointer: coarse descreve uma entrada principal imprecisa, como um dedo. any-pointer e any-hover verificam se algum dispositivo de entrada conectado tem uma capacidade; eles não estabelecem que todo leitor a esteja usando.

Permita ampliação de texto e rotação

Mantenha o zoom habilitado e verifique a ampliação do texto para 200% sem perda de conteúdo ou funcionalidade. Use tamanhos relativos à fonte e caixas de texto que crescem. min-height permite que uma caixa cresça quando seu conteúdo cresce; uma altura fixa pode deixar o texto ampliado transbordar para a próxima seção.

Ofereça suporte às orientações retrato e paisagem, a menos que uma delas seja essencial à atividade. Celulares na orientação paisagem podem ter muito pouco espaço vertical. Uma consulta de altura como @media (max-height: 30em) pode permitir que um cabeçalho aderente saia da tela com a rolagem, para que não cubra o conteúdo.

Respeite preferências e saída

Use prefers-reduced-motion para evitar movimentos grandes para leitores que pedem menos movimento. Uma abordagem é colocar animações opcionais dentro de @media (prefers-reduced-motion: no-preference). Você também pode remover uma animação existente dentro de uma consulta reduce.

Para um tema escuro, combine cores legíveis de texto e fundo dentro de @media (prefers-color-scheme: dark). Verifique o contraste nos dois temas. color-scheme: light dark permite que controles e barras de rolagem desenhados pelo navegador acompanhem um tema adequado; ele não escolhe todas as cores da página para você.

Uma regra de movimento reduzido pode atingir apenas o componente animado:

@media (prefers-reduced-motion: reduce) {
  .banner { animation: none; }
}

Mantenha a própria mensagem disponível quando o movimento for removido. Para um tema escuro, altere as cores de primeiro plano e fundo juntas; mudar apenas uma delas pode fazer o texto se confundir com o que está ao redor. Visualize também os controles de formulário, pois os controles desenhados pelo navegador podem diferir das superfícies que você definiu.

Use @media print para ocultar a navegação e os botões e produzir texto escuro sobre branco. Links impressos podem mostrar seus destinos com a[href]::after { content: " (" attr(href) ")"; }. Teste uma prévia de impressão para verificar se o conteúdo, os fundos e as quebras de página continuam legíveis.