O design da Web responsivo é uma abordagem para construir páginas da Web onde 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 de usuário para todos os usuários e pode até ajudar a melhorar as classificações do mecanismo de pesquisa. Consultas de mídia CSS constituem uma parte importante do web design 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: body {font-size: 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 de mídia 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. 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 é iniciada 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 o Media Query, 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, mudando 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 mudar a cor de todos os parágrafos para preto (# 000000), adicione este: @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 cada tamanho maior, inserindo-as em sua folha de estilos como esta: @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á criando 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.
Formato mla apa chicago Sua Citação
Girard, Jeremy. “Como você escreve uma consulta de mídia CSS?” ThoughtCo, maio. 14 de 2021, thinkingco.com/how-do-you-write-css-media-queries-3469990.
Girard, Jeremy. (2021, 14 de maio). Como você escreve uma consulta de mídia CSS? Obtido em https://www.thoughtco.com/how-do-you-write-css-media-queries-3469990
Girard, Jeremy. “Como você escreve uma consulta de mídia CSS?” ThoughtCo. https://www.thoughtco.com/how-do-you-write-css-media-queries-3469990 (acessado em 31 de maio de 2021).
