APRENDER. PRATICAR. EVOLUIR.O viewport relevante
A declaração width=device-width, initial-scale=1 ajuda o browser móvel a usar um viewport de layout coerente com a largura do dispositivo em CSS pixels. Não transforma CSS pixels em pixels físicos nem resolve uma largura fixa excessiva no conteúdo.
O excerto não impede zoom. Acrescentar user-scalable=no para manter uma disposição visual pode retirar uma ferramenta de leitura necessária, e não corrige as restrições que tornam a página demasiado larga.
Condições e limites inclusivos
Min-width: 600px corresponde quando o viewport tem exatamente 600 CSS px e quando é mais largo. A condição decide se as regras entram na cascata; não lhes dá mais especificidade. A 1000px, ambas as queries do exemplo correspondem.
Como os seletores e os restantes critérios empatam, a última declaração determina as três colunas. Se inverteres a ordem destas duas regras, uma condição mais estreita pode sobrepor-se à mais larga; não existe um else-if implícito.
Combinar condições com intenção
And exige que as condições combinadas sejam verdadeiras; uma lista separada por vírgulas corresponde se alguma query da lista corresponder. A expressão screen and (min-width: 600px) exige o tipo screen e essa largura. Orientation descreve a relação entre dimensões do viewport, não garante espaço suficiente para um componente nem identifica o hardware.
Antes de acrescentar mais condições, explica qual restrição concreta cada uma protege.
Breakpoints guiados pelo conteúdo
Os valores 600 e 900 são hipóteses do exemplo. Num produto real, observa quando títulos, filtros e ações deixam de caber sem sobreposição ou perda de significado. Testa as traduções e a ampliação, porque um rótulo maior pode exigir outra disposição no mesmo dispositivo.
Uma coluna simples como base reduz premissas, enquanto mais colunas podem ser acrescentadas quando houver espaço suficiente. Flexibilidade e limites min/max também ajudam; uma media query não é obrigatória para cada adaptação.
Unidades e proporções
Rem refere-se à dimensão da fonte no root. Em aplicado a font-size usa a fonte do pai; em no padding usa a fonte do próprio elemento. Com root de 20px e filho font-size: 1rem, padding: 1em vale 20px, mesmo se o pai tiver 30px.
Numa imagem, max-width: 100% e height: auto permitem limitar a largura ao contentor preservando a proporção nas condições do exemplo. Uma altura fixa adicional pode contrariar essa intenção.
O slot não é o ficheiro
Nos candidatos srcset com descritores w, cada número identifica a largura intrínseca do ficheiro. Sizes indica o slot esperado em diferentes condições; não define por si só a largura visual. Se a imagem ocupa 300px mas sizes declara 100vw num viewport de 1200px, a indicação sobrestima a necessidade e pode levar a um recurso maior.
O browser considera também densidade e outras condições. Por isso, o diagnóstico aponta uma indicação incoerente sem prometer um ficheiro exato para todos os browsers.
Reflow sem perder informação
O critério de reflow explica por que texto verticalmente percorrido deve adaptar-se a uma largura equivalente a 320 CSS px sem exigir scroll horizontal para cada linha. Há exceções delimitadas para partes que precisam de duas dimensões, como certas tabelas e mapas; isso não justifica manter todos os parágrafos com largura fixa.
Uma tabela pode ter região de scroll própria enquanto o texto reflui. Esconder a barra com overflow: hidden pode apenas ocultar conteúdo, sem cumprir o objetivo de preservar informação e funcionalidade.
<!-- In the document head -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.cards img { max-width: 100%; height: auto; }
@media (min-width: 600px) {
.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
</style>O excerto pertence ao head de uma página com cartões. Abaixo de 600 CSS px há uma coluna; entre 600 e menos de 900 há duas; a partir de 900 ambas as queries correspondem e a regra posterior define três. Os limites são escolhas ilustrativas que precisam de confirmação com o conteúdo real. Não definem categorias universais de telemóvel ou tablet.
Armadilhas comuns
Confundir CSS px com pixels físicos; tratar media queries como else-if; pensar que sizes define width; esconder overflow para parecer responsivo; bloquear zoom; assumir que landscape significa espaço suficiente; usar um breakpoint sem observar ambas as traduções.
Tópicos relacionados: Ligações, imagens e significado do conteúdo · Layout com Flexbox e Grid · Foco, estados, movimento e preferências
Layout responsivo conserva conteúdo e ações quando o espaço muda. Usa condições compreensíveis, resolve todas as regras que correspondem e mantém as indicações de recursos coerentes com a dimensão visual. A inspeção destes exemplos não equivale a uma certificação de acessibilidade da página.
Referência: Content-driven responsive layout · HTML Living Standard; modular CSS