Como você escreve uma consulta de mídia CSS?

tela @media e (largura mínima: 1000px) {}

Esta é a sintaxe de uma consulta de mídia. Começa com @meios de comunicação para estabelecer a própria consulta de mídia. Em seguida, defina o tipo de mídia, que neste caso é tela. Este tipo se aplica a telas de computadores desktop, tablets, telefones, etc. Termine a consulta de mídia com o recurso de mídia. Em nosso exemplo acima, isso é largura média: 1000px. Isso significa que a Media Query é ativada para exibições com largura mínima de 1000 pixels.

Após esses elementos da Media Query, adicione uma chave de abertura e fechamento semelhante ao que você faria em qualquer regra CSS normal.

A etapa final para uma consulta de mídia é adicionar as regras CSS a serem aplicadas depois que essa condição for atendida. Insira essas regras CSS entre as chaves que compõem a consulta de mídia, assim:

 @media screen e (min-width: 1000px) {body {font-size: 20px; }





instagram viewer

Quando as condições da consulta de mídia são atendidas (a janela do navegador tem pelo menos 1000 pixels de largura), este estilo CSS entra em vigor, alterando o tamanho da fonte de nosso site de 16 pixels que estabelecemos originalmente para nosso novo valor de 20 píxeis. 
 Adicionando mais estilos 

Coloque quantos Regras CSS dentro desta consulta de mídia conforme necessário para ajustar a aparência visual do seu site. Por exemplo, para não apenas aumentar o tamanho da fonte para 20 pixels, mas também alterar a cor de todos os parágrafos para preto (# 000000), adicione o seguinte: 
@media screen e (min-width: 1000px) {
corpo {
tamanho da fonte: 20px;
}
p {
cor: # 000000;
}
}
 Adicionando mais consultas de mídia 

Além disso, você pode adicionar mais Consultas de mídia para todos os tamanhos maiores, inserindo-as em sua folha de estilos desta forma: 
@media screen e (min-width: 1000px) {
corpo {
tamanho da fonte: 20px;
}
p {
cor: # 000000;
{
}
@media screen e (largura mínima: 1400px) {
corpo {
tamanho da fonte: 24px;
}
}

As primeiras Media Queries começam com 1000 pixels de largura, mudando o tamanho da fonte para 20 pixels. Então, quando o navegador estava acima de 1400 pixels, o tamanho da fonte mudaria novamente para 24 pixels. Adicione quantas Consultas de mídia forem necessárias para seu site específico. 
 Largura mínima e largura máxima 

Geralmente, há duas maneiras de escrever Consultas de mídia - usando largura mínima ou com largura máxima. Até agora, vimos a largura mínima em ação. Essa abordagem ativa as Consultas de mídia depois que um navegador atinge pelo menos essa largura mínima. Portanto, uma consulta que usa largura mínima: 1000px aplica-se quando o navegador tem pelo menos 1000 pixels de largura. Este estilo de consulta de mídia é usado quando você está construindo um site que prioriza os dispositivos móveis. 

Se você usar largura máxima, funciona da maneira oposta. Uma consulta de mídia de "largura máxima: 1000px" se aplica depois que o navegador fica abaixo desse tamanho. 

Cite este artigo.