Media Query é um recurso nas CSS capaz de adaptar o conteúdo de um site para diversas plataformas e tipos de telas (desktop, celular, impressora). É um recurso altamente usado nos dias de hoje pela necessidade que temos de consumir o conteúdo em diversos aparelhos. Tente imprimir essa página (CTRL + P) para ver um exemplo de Media Query.
Com as Media Queries é possível ajustar o tamanho, fonte e até comportamento do site em questão para o usuário ter uma melhor experiência independente da forma que esteja consumindo o conteúdo.
Media Type
Media Types é um recurso atualmente insuficiente e quase obsoleto mas ainda pode ser usado em circunstâncias específicas. Dentro de um link para um estilo CSS, deve-se inserir o parâmetro media e especificar o seu tipo. Os tipos são descritos a seguir:
all: Mídia para todos os dispositivos.print: Mídia para impressoras ou dispositivos que reproduzem uma tela de impressão.screen: Mídia para todos os dispositivos que não se encaixam em 'print'.
Media Features
Um recurso que define as características de uma Media Query. É mais específico que uma Media Type e pode ser usado livremente utilizando as especificações que forem necessárias. É preciso colocar as especificações entre parênteses, por exemplo:
media = "screen and (max-width: 500px)"
Nesse exemplo, o estilo vai ser aplicado a uma tela que tenha no máximo 500 pixels de largura. Um exemplo mais específico pode ser visto na imagem a seguir, onde dependendo se a tela estiver na orientação de paisagem ou retrato (para telas como as de celular, que possuem acelerômetro), a imagem é alterada para uma melhor exibição.
Regra at de Media Queries
Para não precisar criar vários arquivos CSS para cada especificação de media, existe uma at-rule que pode ser colocada em um arquivo CSS com esse mesmo propósito, ela consiste em:
@media (condições para o estilo) {
/* configurações de estilos */
}
Geralmente essa regra deve ser colocada no fim das estilizações do arquivo padrão CSS do projeto, para não haver conflitos.