O que são media queries e como usar

Media queries são uma forma de adaptar o layout e o design de um site ou aplicativo para diferentes dispositivos e tamanhos de tela. Com media queries, você pode definir regras CSS específicas para cada situação, como por exemplo, mudar a cor de fundo, o tamanho da fonte, a disposição dos elementos ou a exibição de imagens.

Para usar media queries, você precisa usar a sintaxe @media na sua folha de estilo CSS. Dentro do bloco @media, você pode especificar as condições que devem ser atendidas para que as regras sejam aplicadas. Por exemplo, você pode usar a propriedade min-width para definir um valor mínimo de largura da tela, ou a propriedade orientation para definir se o dispositivo está em modo retrato ou paisagem.

Veja um exemplo de como usar media queries:

/* Estilo padrão para telas maiores que 600px */
body {
  background-color: white;
  font-size: 16px;
}

/* Estilo específico para telas menores ou iguais a 600px */
@media (max-width: 600px) {
  body {
    background-color: lightblue;
    font-size: 14px;
  }
}

/* Estilo específico para dispositivos em modo paisagem */
@media (orientation: landscape) {
  body {
    background-color: green;
  }
}

Neste exemplo, o estilo padrão é aplicado para todas as telas maiores que 600px de largura. Se a tela for menor ou igual a 600px, o estilo muda para um fundo azul claro e uma fonte menor. Se o dispositivo estiver em modo paisagem, o estilo muda para um fundo verde.

Com media queries, você pode criar sites e aplicativos responsivos, que se adaptam aos diferentes cenários e oferecem uma melhor experiência para os usuários.