Media queries em CSS

Página 30

Media queries em CSS

Media queries são uma técnica do CSS que permite que você defina estilos diferentes para diferentes dispositivos e tamanhos de tela. Com media queries, você pode criar um site responsivo que se adapta automaticamente a diferentes dispositivos, como smartphones, tablets e desktops.

As media queries funcionam adicionando uma condição que verifica o tamanho da tela ou o tipo de dispositivo e, em seguida, aplicando estilos diferentes com base nessa condição. Você pode usar media queries para alterar a largura do conteúdo, o tamanho do texto, a cor de fundo e muito mais.

Existem várias maneiras de escrever uma media query CSS, mas a mais comum é usar a palavra-chave "media" seguida de uma condição. Veja um exemplo:

@media (min-width: 768px) {
  /* Estilos para telas maiores que 768px */
}

Neste exemplo, a condição é "min-width: 768px", o que significa que os estilos dentro da media query serão aplicados a telas com uma largura mínima de 768 pixels. Você pode usar outras condições, como "max-width" para telas menores que um determinado tamanho ou "orientation" para dispositivos em orientação retrato ou paisagem.

Além disso, você pode combinar várias condições para criar media queries mais complexas. Por exemplo:

@media (min-width: 768px) and (orientation: landscape) {
  /* Estilos para telas maiores que 768px em orientação paisagem */
}

Neste exemplo, a condição é "min-width: 768px" e "orientation: landscape", o que significa que os estilos dentro da media query serão aplicados a telas com uma largura mínima de 768 pixels e em orientação paisagem.

As media queries são uma ferramenta poderosa para criar sites responsivos e adaptáveis a diferentes dispositivos. Com elas, você pode garantir que seu site seja fácil de usar e navegar, independentemente do dispositivo usado pelo usuário.

Next page of the Free Ebook:

31CSS preprocessors