Artigo original escrito por Cem Eygi
Artigo original: Media Query CSS Tutorial – Standard Resolutions, CSS Breakpoints, and Target Phone Sizes
Traduzido e adaptado por Daniel Rosa

No passado, criar um site da web era muito mais simples. Hoje, um layout de site deve estar adaptado não apenas aos computadores, mas também a tablets, dispositivos móveis e até TVs.

Fazer um site da web com um layout adaptável é chamado de Design responsivo para a web. As media queries do CSS são uma das partes mais importantes do design responsivo. Neste artigo, vamos dar uma olhada mais de perto nas media queries e em como usá-las em CSS.

Se você preferir, pode assistir à versão em vídeo abaixo:

O que é uma media query?

Uma media query é um recurso do CSS3 que faz com que uma página da web se adapte ao seu layout para tamanhos de tela e tipos de mídia diferentes.

Sintaxe

@media tipo de mídia and (condição: breakpoint) {
  // regras de CSS
}

Podemos visar tipos de mídia diferentes sob uma variedade de condições. Se a condição e/ou tipos de mídia coincidirem, as regras dentro da media query serão aplicadas, o que não ocorre em outras circunstâncias.

A sintaxe pode parecer complicada de início, então vamos explicar cada parte em detalhes…

Regra de @Media

Começamos definindo media queries com a regra @media e, depois, incluímos as regras de CSS dentro das chaves. A regra de @ media também é usada para especificar os tipos de mídia de destino.

@media () {
  // regras de CSS
}

Parênteses

Dentro dos parênteses, definimos uma condição. Por exemplo, queremos aplicar um tamanho de fonte maior para dispositivos móveis. Para fazer isso, precisamos definir uma largura máxima, que é verificada em comparação com a largura de um dispositivo:

.text {
  font-size: 14px;
}

@media (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

Normalmente, o tamanho do texto será de 14px. No entanto, como aplicamos uma media query, ele mudará para 16px quando um dispositivo tiver a largura máxima de 480px ou menos.

Importante: sempre coloque suas media queries ao final do arquivo CSS.

Tipos de mídia

Se não aplicarmos um tipo de mídia, a regra de @media selecionará todos os tipos de dispositivo por padrão. Do contrário, os tipos de mídia vêm logo após a regra de @media. Há muitos tipos de dispositivos, mas podemos agrupá-los em 4 categorias:

  • all — para todos os tipos de mídia
  • print — para impressoras
  • screen — para telas de computador, tablets e smartphones
  • speech — para leitores de tela que “leem” a página em voz alta

Por exemplo, quando eu desejo selecionar apenas as telas, usarei a palavra-chave screen logo após a regra de @media. Também concatenarei as regras com a palavra-chave “and”:

@media screen and (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

Breakpoints

Breakpoints são, talvez, o termo mais comum que você ouvirá e usará ao falarmos de media queries. Um breakpoint é uma chave para determinar o momento de mudar o layout e adaptá-lo às novas regras dentro das media queries. Vamos voltar ao nosso exemplo do início:

@media (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

Aqui, o breakpoint é 480px. Agora, a media query sabe quando definir ou sobrescrever a nova classe. Basicamente, se a largura de um dispositivo for inferior a 480px, a classe text será aplicada. Do contrário, isso não acontece.

Breakpoints comuns: existe uma resolução padrão?

Uma das perguntas que é feita com maior frequência é “Qual é o breakpoint que eu devo usar?”. Há milhares de dispositivos no mercado. Assim, não podemos nem devemos definir breakpoints fixos para cada um deles.

É por isso que não podemos dizer que exista uma resolução padrão para dispositivos, mas há alguns breakpoints normalmente usados na programação do dia a dia. Se você estiver usando um framework de CSS (como o Bootstrap, o Bulma etc.), você também pode usar seus breakpoints.

Vamos ver agora alguns breakpoints comuns em termos de larguras dos dispositivos:

  • 320px — 480px: dispositivos móveis
  • 481px — 768px: iPads, tablets
  • 769px — 1024px: telas pequenas, laptops
  • 1025px — 1200px: desktops, telas grandes
  • 1201px e acima —  telas muito grandes, TVs

Como dito anteriormente, esses breakpoints podem diferir e não há um padrão definido com exatidão, mas a lista acima compreende os que são usados normalmente.

Para encerrar

Usar o design responsivo é uma obrigação nos campos de design e desenvolvimento para a web nos dias de hoje. Media queries são uma das partes mais importantes na criação de layouts responsivos. Espero que este artigo tenha sido útil para você no sentido de entender como as media queries funcionam.

Se quiser saber mais sobre desenvolvimento para a web, se inscreva no canal do autor.

Obrigado pela leitura!