Como funcionam as consultas de mídia no…

As consultas de media permitem aplicar estilos CSS específicos dependendo das características do dispositivo ou da área de visualização. São usadas para criar um design responsivo que é exibido corretamente em diferentes ecrãs, incluindo dispositivos móveis, tablets e desktops.

Sintaxe principal da consulta de media:

@media <tipo_de_midia> and (<expressão>) {
  /* regras CSS */
}

<tipo_de_midia> determina a que tipo de dispositivo se aplica a consulta (por exemplo, screen, print, all).
<expressão> define as condições sob as quais os estilos são aplicados (por exemplo, largura, altura, orientação do ecrã, resolução).

Expressões populares para design responsivo:

min-width: Os estilos aplicam-se se a largura da área de visualização for igual ou maior que o valor especificado.
max-width: Os estilos aplicam-se se a largura da área de visualização for igual ou menor que o valor especificado.
orientation: Os estilos aplicam-se dependendo da orientação do ecrã (portrait ou landscape).
resolution: Os estilos aplicam-se dependendo da resolução do ecrã.

Exemplo de uso de max-width para estilos em dispositivos móveis:

/* Estilos padrão */
body {
  font-size: 16px;
}

/* Estilos para ecrãs até 768px de largura (tipicamente para móveis) */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .container {
    padding: 10px;
  }
}

Exemplo de uso de min-width para estilos em desktops (abordagem "mobile first"):

/* Estilos padrão para móveis */
.column {
  width: 100%;
}

/* Estilos para ecrãs com largura a partir de 992px (tipicamente para desktops) */
@media screen and (min-width: 992px) {
  .column {
    width: 50%;
    float: left;
  }
}

Combinação de expressões com operadores and, or (em consultas de media, or é escrito com vírgula) e not:

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* Estilos apenas para tablets */
}

@media screen and (orientation: landscape), print {
  /* Estilos para orientação paisagem e para impressão */
}

A meta-tag viewport é importante para o funcionamento correto das consultas de media em dispositivos móveis:

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

width=device-width define a largura da área de visualização igual à largura do dispositivo.
initial-scale=1.0 define o nível de zoom inicial.

Sem esta meta-tag, muitos navegadores móveis escalonam a página por padrão, ignorando a largura real do dispositivo, o que prejudica a responsividade.

Como funcionam as consultas de mídia no desenvolvimento web para design responsivo, incluindo dispositivos móveis?