Consultas de mídia

As consultas de mídia são um recurso do CSS que permite que o conteúdo de uma página da web se adapte a diferentes tamanhos e resoluções de tela. Elas são uma parte fundamental do design responsivo da web e são usadas para personalizar a aparência de sites para vários dispositivos.

As consultas de mídia podem ser inseridas no HTML de uma página da web ou incluídas em um arquivo .CSS separado referenciado pela página. Abaixo está um exemplo de uma consulta de mídia simples:

@media screen and (max-width: 768px)
{
  header { height: 70px; }
  article { font-size: 14px; }
  img { max-width: 480px; }
}

A consulta de mídia acima é ativada se a janela do navegador de um usuário tiver 768 pixels de largura ou menos. Isso pode acontecer se você reduzir o tamanho da janela em um computador desktop ou se estiver usando um dispositivo móvel, como um tablet, para visualizar a página da web.

No design responsivo da web, as consultas de mídia funcionam como filtros para diferentes tamanhos de tela. Como todos os módulos de uma folha de estilos em cascata, aqueles que aparecem mais abaixo na lista substituem os que estão acima. Portanto, os estilos padrão geralmente são definidos primeiro em um documento CSS, seguidos pelas consultas de mídia para diferentes tamanhos de tela. Por exemplo, os estilos para desktop podem ser definidos primeiro, seguidos por uma consulta de mídia com estilos para usuários de tablets e, depois, por uma consulta de mídia criada para usuários de smartphones. Os estilos também podem ser definidos na ordem oposta, o que é considerado um desenvolvimento "mobile first".

Embora min-width seja de longe o recurso mais usado em consultas de mídia, muitos outros também estão disponíveis. Alguns exemplos são min-device-width, min-device-height, aspect-ratio, max-color-index, max-resolution, orientation e resolution. O valor resolution, por exemplo, pode ser usado para detectar telas HiDPI como (telas Retina) e carregar gráficos de alta resolução em vez de imagens padrão.