Definição – o que significa o Media Query?
Uma consulta de mídia é uma funcionalidade HTML / CSS que permite que o conteúdo de uma página da Web se adapte ao tipo de mídia em que a página está sendo renderizada, como uma tela de computador ou de um telefone ou tablet. Esta é considerada uma tecnologia central para a implementação de Web design responsivo e foi recomendada para implementação como um padrão em junho de 2012, juntamente com outras funcionalidades CSS3.
Definirtec explica Media Query
As consultas de mídia consistem em um tipo de mídia junto com uma ou mais expressões que verificam condicionalmente determinados recursos de mídia, especialmente os tamanhos de tela. As expressões lógicas em uma consulta de mídia podem ser verdadeiras ou falsas; é verdadeiro se o tipo de mídia da consulta corresponder ao tipo de mídia do dispositivo em que o agente do usuário (navegador da Web) está sendo executado; caso contrário, é falso. Quando a consulta de mídia for verdadeira, as regras de estilo correspondentes especificadas serão aplicadas, seguindo as regras normais em cascata. Deve-se notar que, mesmo que a consulta resulte em falso, as folhas de estilo especificadas no tag ainda são baixados, mas simplesmente não são aplicados.
Exemplo usando o HTML tag:
Exemplo usando @media dentro do tag:
@media (largura máxima: 500px) {
.left_sidebar {display: none; }
}
Esta definição foi escrita no contexto do Responsive Web Design