a fim de implementar o design responsivo da web, é importante entender as consultas de mídia em CSS, especialmente apenas para mídia e consultas de tela de mídia.vamos começar com a pergunta óbvia.

O que é uma consulta multimédia?

uma consulta de mídia é uma técnica que foi introduzida no CSS3. A consulta envolve o uso da regra @media para executar um bloco de propriedades CSS no caso de uma condição pré-determinada ser verdadeira.

Por exemplo, o código abaixo dita que se a janela do navegador for 400px ou menos, a cor de fundo será verde-claro:

@Tela apenas media e (max-width: 400px) {
corpo {
fundo-cor: Luz verde;
}
}

pesquisas de mídia são especialmente úteis com a adição de breakpoints para o design responsivo. Uma vez que os pontos de paragem são essencialmente números de pixels em que o conteúdo ou o desenho aparece de forma diferente para os utilizadores, são usadas pesquisas multimédia para definir quais as alterações que devem ocorrer em que pixels.

no exemplo abaixo, o código direciona que se a janela do navegador for reduzida abaixo de 600px, cada largura da coluna deve se tornar 100%:

/* para o desktop: */
.col – 1 {Largura: 8,33%;}
.col – 2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {Largura: 41,66%;}
.col-6 {Largura: 50%;}
.col-7 {largura: 58,33%;}
.col-8 {width: 66.66%;}
.col-9 {largura: 75%;}
.col-10 {width: 83.33%;}
.col-11 {largura: 91,66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 600px) {
/* For mobile phones: * /
{
width: 100%;
}
}

cada consulta de mídia consiste de um tipo opcional de mídia e uma ou mais expressões de recurso de mídia. É possível combinar múltiplas consultas de mídia com operadores lógicos. Todas as consultas de mídia são sensíveis à capitalização.

cada consulta de mídia é considerada verdadeira quando o tipo de mídia especificado corresponde aos dispositivos em que o site é exibido. Além disso, as expressões de recursos de mídia também devem ser verdadeiras.

O que é a pesquisa media-screen?

a consulta de ecrã @ media significa simplesmente que a consulta em questão se destina aos ecrãs de cores ou dispositivos que suportam um modo de “ecrã”.

tomemos um exemplo:

@ecrã Multimédia e (largura máxima:500px)

a consulta acima aplica-se a ecrãs com uma largura máxima de 500 pixels. O objetivo disto é direcionar o código para distinguir entre “tela” e outros tipos de mídia (como impressão, braille, gravado, portátil, etc.).

O que é a consulta apenas para mídia?

adicionando o operador lógico ‘somente’ à consulta de mídia, o desenvolvedor garante que a consulta é aplicada somente se a condição inteira corresponder. Se você não usar apenas, navegadores mais antigos podem não ler ou interpretar todas as expressões de recursos de mídia. Por exemplo, se a consulta for

@ecrã Multimédia e (largura máxima:500px)

navegadores mais antigos podem interpretar a consulta como apenas ecrã e ignorar a contagem de pixels. Isso levaria à aplicação da condição de consulta em todas as telas. Para evitar isso, você pode usar:

@apenas o ecrã e (largura máxima:500px)

ao usar o único operador, certifique-se de especificar o tipo de mídia.

Significance in responsive design

media queries are instrumental in implementing responsive web design. As consultas acima discutidas são duas das mais usadas e são úteis para garantir que o conteúdo do seu site é otimizado para os tamanhos e tipos de dispositivos.uma vez que tenha utilizado consultas CSS no seu site, certifique-se de verificar a sua eficácia. A maneira mais fácil de fazer isso é usar uma ferramenta que lhe permite testar o design do seu site em dispositivos reais e navegadores. Existem várias ferramentas para facilitar isso, mas leve o seu tempo para encontrar um verificador responsivo on — line que lhe dá a oportunidade de testar em uma variedade suficientemente ampla de dispositivos-tanto desktop quanto móvel.