Layout responsivo para todos os dispositivos: o guia básico sobre Media Query

Entendendo o design responsivo

Em resumo, design web responsivo é a forma de usar HTML e CSS para criar uma página ou aplicação que funciona bem em qualquer dispositivo. Dessa forma, o tamanho da tela de cada aparelho deixa de ser um obstáculo.

Todos os elementos da tela, como botões, imagens e funcionalidades, precisam aparecer e funcionar tanto em monitores enormes quanto em telas de smartphone. Em outras palavras, o conteúdo se adapta ao espaço disponível, e não o contrário.

Esse é o pensamento de responsividade que todo desenvolvedor de software deve ter ao criar qualquer página web. Se quiser se aprofundar nessa mentalidade, o artigo Pense de forma responsiva complementa bem este guia.

Além da media query, existem outras técnicas que ajudam no desenvolvimento de páginas responsivas:

• Usar unidades relativas em vez de absolutas, por exemplo % ou rem no lugar de px.
• Configurar corretamente o viewport e a escala da página.
• Aplicar recursos de acessibilidade em toda a interface.

No entanto, neste artigo o foco fica na media query, porque ela é a melhor porta de entrada para quem está começando. Depois de dominá-la, as demais técnicas ficam muito mais fáceis de combinar.

O que é media query

A media query é um recurso do CSS que chegou junto com o CSS3. Com ela, o desenvolvedor pode modificar o comportamento da página de acordo com as características da tela, como largura (width) e altura (height).

Ou seja, diante de tamanhos de tela diferentes, a página assume comportamentos diferentes. O mesmo HTML ganha um layout em uma coluna no celular e em várias colunas no desktop, por exemplo.

Na prática, a media query funciona como uma espécie de framework embutido no próprio CSS. Assim, você escreve as regras uma única vez e as reaproveita em toda a aplicação.

Em uma página isolada talvez a diferença não pareça tão grande. Contudo, quando você trabalha em uma aplicação com dezenas de páginas, a organização que a media query traz faz uma diferença enorme.

Isso acontece porque, ao planejar cada media query, você considera mais do que largura e altura. Também entram na conta a estrutura da página, a localização dos elementos, os links, as posições e a hierarquia do conteúdo.

A estrutura da media query

A estrutura padrão de uma media query segue o formato abaixo. Ela reúne os elementos que permitem mudar o comportamento dos componentes de forma controlada.

@media media-type and (expression) {
  /* código CSS aplicado quando a condição for verdadeira */
}

Vamos analisar cada parte com calma, porque entender a sintaxe evita boa parte dos erros de quem está começando.

Exemplo prático de media query

Veja um exemplo simples que altera a cor de fundo do body em telas estreitas:

@media screen and (max-width: 450px) {
  body {
    background-color: #004aad;
  }
}

Nesse caso, sempre que a largura da tela for de no máximo 450px, a nova cor de fundo entra em ação. Em telas maiores, o navegador ignora o bloco e mantém o estilo original.

Também é possível escrever a mesma media query sem especificar o tipo de mídia. Assim, a regra vale para todas as mídias que atendem à expressão:

@media (max-width: 450px) {
  body {
    background-color: #004aad;
  }
}

Repare que, sem o tipo de mídia, o and também sai da declaração. Escrever @media and (max-width: 450px) é um erro comum, porque o and precisa unir duas partes e, nesse caso, só existe uma.

@media (min-width: 451px) and (max-width: 800px) {
  .container {
    display: flex;
    flex-direction: column;
  }
}

Em que lugar escrever a media query

Como a media query serve para alterar comportamentos de CSS, ela sempre fica no lugar onde os estilos da página estão definidos. Basicamente, existem três formas de declarar o CSS em uma página.

<link rel="stylesheet" href="styles.css" />

<head>
  <style>
    @media (max-width: 450px) {
      body { background-color: #004aad; }
    }
  </style>
</head>

Media query no atributo media do link

Existe ainda uma alternativa para quem não quer escrever a media query dentro do arquivo CSS. Nesse caso, a condição vai direto no atributo media da tag <link> do HTML.

<link
  rel="stylesheet"
  media="(max-width: 800px) and (min-width: 451px)"
  href="tablet.css" />
<link rel="stylesheet" media="(max-width: 450px)" href="smartphone.css" />

Dessa forma, toda a lógica de escolha fica na própria tag <link>. Cada arquivo de estilo só passa a valer quando a tela atende à condição informada.

Dependendo do cenário, essa abordagem pode ser até mais produtiva, porque separa os estilos de tablet e de smartphone em arquivos próprios. Além disso, fica fácil enxergar qual folha atende cada faixa de tela.

Vale lembrar que o navegador ainda baixa as folhas cuja condição não é atendida, apenas com prioridade menor. Ou seja, a técnica organiza o código, mas não reduz o número de requisições.

Eu não recomendo esse recurso em projetos maiores, já que ele pode poluir bastante o HTML. Mesmo assim, é importante saber que ele existe, pois em um projeto mínimo pode ser a solução mais simples.

Boas práticas com media query

Saber a sintaxe é só o começo. A seguir estão alguns cuidados que fazem diferença na qualidade de cada media query que você escrever.

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

Vídeo sobre media query no canal do balta.io

Se você prefere aprender assistindo, o vídeo abaixo mostra a media query em ação, com exemplos práticos no navegador.

Curso gratuito para criar sites responsivos

Para continuar evoluindo, o balta.io oferece um curso gratuito focado na criação de sites responsivos. Ele aprofunda os conceitos deste guia com projetos práticos.

Se você ainda está dando os primeiros passos na web, vale ler também O que você precisa saber antes de aprender HTML. Para consultar todos os detalhes da sintaxe, a referência oficial da MDN sobre o uso de media queries é a melhor fonte.

Conclusão

Agora você conhece a base da media query e entende o poder desse recurso na construção de páginas web responsivas. Com @media, um tipo de mídia opcional e uma expressão, você controla como cada parte do layout se comporta.

Esse recurso é essencial para construir páginas que funcionam em todos os tamanhos de tela. Por isso, todo desenvolvedor deve usá-lo para ter controle total sobre o comportamento da interface em telas menores.

Além disso, você viu onde declarar cada media query, como usar o atributo media da tag <link> e quais boas práticas evitam dor de cabeça. Configure o viewport, escolha breakpoints pelo conteúdo e combine as regras com Flexbox e Grid.

Minha sugestão agora é colocar tudo isso em prática e ver com seus próprios olhos como uma media query transforma uma página.

Espero que tenha gostado da leitura e que aproveite bem o material de apoio. Bons códigos e até a próxima.

FAQ

Media query funciona em todos os navegadores?

Sim. Os navegadores modernos suportam media queries há muitos anos, inclusive nas versões móveis.

Qual a diferença entre max-width e min-width?

O max-width aplica as regras até uma largura máxima, enquanto o min-width aplica a partir de uma largura mínima. Em geral, max-width combina com desktop first e min-width com mobile first.

Preciso informar o tipo de mídia em toda media query?

Não. Quando o tipo de mídia não aparece, o navegador assume all e avalia apenas a expressão.

Posso usar media query no atributo style?

Não. O atributo style aceita apenas declarações de propriedades, então a regra precisa ficar em uma folha de estilos externa ou em uma tag <style>.

Quais breakpoints devo usar?

Defina os breakpoints nos pontos em que o seu conteúdo começa a quebrar. Valores prontos de frameworks servem como referência, mas não substituem o teste com o seu layout.