Você sabe como fazer uma consulta de mídia CSS? O design da Web responsivo é uma abordagem para criar páginas da Web em que essas páginas podem alterar dinamicamente seu layout e aparência com base no tamanho da tela do visitante.
Telas grandes recebem um layout adequado para telas maiores, enquanto dispositivos menores, como telefones celulares, recebem o mesmo site formatado de maneira adequada para essa tela menor.
Essa abordagem fornece uma melhor experiência do usuário para todos os usuários e pode até mesmo ajudar a melhorar as classificações do mecanismo de pesquisa.
Consultas de mídia CSS constituem uma parte importante do design da Web responsivo.
As consultas de mídia são como pequenas declarações condicionais dentro do arquivo CSS do seu site, permitindo que você defina certas regras CSS que só terão efeito quando uma determinada condição for atendida, como quando o tamanho da tela está acima ou abaixo de certos limites.
As consultas de mídia agora são padrão, mas versões muito antigas do Internet Explorer não as suportam.
Consultas de mídia em ação
Comece com um documento HTML bem estruturado, livre de qualquer estilo visual.
Em seu arquivo CSS, defina o estilo da página e defina uma linha de base para a aparência do site. Para processar o tamanho da fonte da página em 16 pixels, escreva este CSS:
corpo {tamanho da fonte: 16px; }
Para aumentar o tamanho da fonte para telas maiores que tenham amplo espaço para isso, inicie uma Consulta de mídia como esta:
tela @media e (largura mínima: 1000px) {}
Esta é a sintaxe de uma consulta de mídia. Ele começa com @media para estabelecer a própria consulta de mídia. Em seguida, defina o tipo de mídia, que neste caso é a tela.
Este tipo se aplica a telas de computadores desktop, tablets, telefones, etc. Encerre 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; }
Quando as condições da Media Query 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 do nosso site dos 16 pixels que estabelecemos originalmente para nosso novo valor de 20 pixels.
Adicionando mais estilos
Coloque tantas regras CSS nesta consulta de mídia quantas forem necessárias 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) { body { font-size: 20px; } p { cor: # 000000; } }
Adicionando mais consultas de mídia
Além disso, você pode adicionar mais Consultas de mídia para cada tamanho maior, inserindo-as em sua folha de estilos desta forma:
@media screen e (min-width: 1000px) { body { font-size: 20px; } p { cor: # 000000; { } @media screen e (min-width: 1400px) { body { font-size: 24px; } }
As primeiras Media Queries começam com 1000 pixels de largura, mudando o tamanho da fonte para 20 pixels. E
ntã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 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 se aplica 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 max-width, funciona da maneira oposta. Uma consulta de mídia de “largura máxima: 1000px” se
