04.02.2025

Consultas de Mídia em CSS: Noções Básicas e Exemplos

Introdução às Consultas de Mídia

As consultas de mídia em CSS são uma ferramenta poderosa que permite adaptar páginas da web para diferentes dispositivos e tamanhos de tela. Elas são utilizadas para criar designs responsivos que se ajustam automaticamente às condições de visualização do usuário. Isso é especialmente importante na era dos dispositivos móveis, onde os usuários podem acessar sites em telas de tamanhos variados – desde pequenos smartphones até grandes monitores de desktop.

O design responsivo não apenas melhora a experiência do usuário, mas também ajuda a melhorar a classificação de um site nos motores de busca. Por exemplo, o Google leva em consideração a usabilidade de um site em dispositivos móveis ao classificar os resultados de busca. Portanto, utilizar consultas de mídia se tornou uma parte integral do design web moderno.

As consultas de mídia permitem que desenvolvedores alterem estilos CSS com base em várias características do dispositivo, como largura e altura da tela, orientação, resolução e até mesmo esquema de cores. Essa flexibilidade permite que os desenvolvedores criem designs que aparecem e funcionam bem em qualquer dispositivo.

Sintaxe das Consultas de Mídia

As consultas de mídia em CSS têm uma sintaxe simples e clara. Elas começam com a palavra-chave @media, seguida por uma condição e um bloco de estilos que são aplicados se essa condição for atendida.

@media (condição) {
  /* estilos CSS */
}

Exemplos de Condições

1. Largura Mínima da Tela: aplica estilos se a largura da tela for maior ou igual ao valor especificado.

   @media (min-width: 600px) {
     body {
       background-color: lightblue;
     }
   }

2. Largura Máxima da Tela: aplica estilos se a largura da tela for menor ou igual ao valor especificado.

   @media (max-width: 600px) {
     body {
       background-color: lightgreen;
     }
   }

3. Orientação da Tela: aplica estilos dependendo da orientação da tela (retrato ou paisagem).

   @media (orientation: landscape) {
     body {
       background-color: lightcoral;
     }
   }

4. Densidade de Pixels: permite alterar estilos com base na densidade de pixels do dispositivo.

   @media (min-resolution: 2dppx) {
     body {
       font-size: 18px;
     }
   }

Combinando Condições

As consultas de mídia também permitem combinar várias condições usando operadores lógicos and, or, not.

@media (min-width: 600px) and (orientation: landscape) {
  body {
    background-color: lightcoral;
  }
}

Exemplos de Utilização de Consultas de Mídia

Vamos analisar alguns exemplos que ajudarão a entender melhor como usar consultas de mídia na prática.

Exemplo 1: Mudando o Fundo da Página

Vamos alterar a cor de fundo da página dependendo da largura da tela.

body {
  background-color: white;
}

@media (min-width: 600px) {
  body {
    background-color: lightblue;
  }
}

@media (max-width: 599px) {
  body {
    background-color: lightgreen;
  }
}

Este exemplo demonstra como as consultas de mídia podem ser usadas para mudar estilos com base na largura da tela. Quando a largura da tela é maior ou igual a 600px, a cor de fundo será azul claro. Se a largura for menor que 600px, a cor de fundo mudará para verde claro.

Exemplo 2: Adaptando o Tamanho da Fonte

Vamos mudar o tamanho da fonte de um título com base na largura da tela.

h1 {
  font-size: 24px;
}

@media (min-width: 600px) {
  h1 {
    font-size: 36px;
  }
}

@media (max-width: 599px) {
  h1 {
    font-size: 18px;
  }
}

Neste exemplo, o tamanho da fonte do título h1 muda com base na largura da tela. Em larguras maiores ou iguais a 600px, o tamanho da fonte aumenta para 36px, enquanto que em larguras menores que 600px, ele diminui para 18px.

Exemplo 3: Ocultando Elementos

Às vezes, é necessário ocultar certos elementos em telas pequenas para melhorar a usabilidade.

.menu {
  display: block;
}

@media (max-width: 600px) {
  .menu {
    display: none;
  }
}

Neste exemplo, o menu será exibido em telas com mais de 600px de largura e ocultado em telas com menos de 600px de largura. Isso é útil para simplificar a interface em dispositivos móveis.

Layout Responsivo com Consultas de Mídia

O layout responsivo é uma abordagem de design web que permite criar sites que se ajustam automaticamente aos tamanhos de tela do dispositivo do usuário. As consultas de mídia desempenham um papel crucial nesse processo.

Exemplo de um Layout Responsivo

Vamos ver um exemplo de um layout responsivo para um design simples de duas colunas.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
    }

    .column {
      flex: 1;
      padding: 10px;
    }

    @media (max-width: 600px) {
      .column {
        flex: 100%;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="column" style="background-color: lightblue;">Coluna 1</div>
    <div class="column" style="background-color: lightgreen;">Coluna 2</div>
  </div>
</body>
</html>

Neste exemplo, quando a largura da tela é menor que 600px, as colunas se empilharão uma em cima da outra, ocupando toda a largura da tela. Em larguras superiores a 600px, as colunas ficarão lado a lado.

Exemplo de Imagens Responsivas

Imagens também podem se adaptar aos tamanhos de tela usando consultas de mídia.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .responsive-img {
      width: 100%;
      height: auto;
    }

    @media (min-width: 600px) {
      .responsive-img {
        width: 50%;
      }
    }
  </style>
</head>
<body>
  <img src="exemplo.jpg" alt="Imagem Exemplo" class="responsive-img">
</body>
</html>

Neste exemplo, a imagem ocupará toda a largura da tela em dispositivos com largura de tela inferior a 600px e somente metade da largura da tela em dispositivos com larguras superiores a 600px.

Dicas e Melhores Práticas

1. Use Unidades Relativas: como porcentagens e em, para tornar seu design mais flexível.
2. Teste em Dispositivos Reais: emuladores são úteis, mas sempre verifique como seu site aparece em dispositivos reais.
3. Minimize o Número de Consultas de Mídia: use-as apenas onde for absolutamente necessário.
4. Comece com Mobile First: isso ajudará você a criar um design mais otimizado e leve.
5. Use Ferramentas Modernas: como CSS Grid e Flexbox, que facilitam a criação de layouts responsivos.
6. Fique Atento ao Desempenho: muitas consultas de mídia podem desacelerar o carregamento da página.
7. Use Pré-processadores: como Sass ou Less, para simplificar o trabalho com consultas de mídia e manter seu código organizado.
8. Documente Suas Consultas de Mídia: isso ajudará você e seus colegas a entenderem quais estilos são aplicados sob diferentes condições.

As consultas de mídia são uma ferramenta poderosa para criar sites responsivos e amigáveis ao usuário. Esperamos que estas noções básicas e exemplos ajudem você a começar a usar consultas de mídia em seus projetos. 😉

Video

Navigation