📱 Media Queries (Responsividade)

Media Queries são uma funcionalidade do CSS3 que permite aplicar estilos diferentes dependendo das características do dispositivo que está acessando a página (largura da tela, altura, orientação, resolução, etc.). Isso é fundamental para criar designs responsivos.

1. Sintaxe Básica

A regra @media é usada para definir um bloco de estilos que será aplicado apenas se a condição especificada for verdadeira.

@media screen and (max-width: 600px) {
    /* Estilos aplicados quando a largura da tela é de no máximo 600px */
    body {
        background-color: lightblue;
    }
}

@media print {
    /* Estilos aplicados apenas ao imprimir a página */
    body {
        font-size: 10pt;
    }
}

2. Tipos de Mídia e Características

• Tipos de Mídia: all, print, screen, speech.
• Características Comuns:
  • width / height: Largura/altura da viewport.
  • min-width / max-width: Largura mínima/máxima da viewport.
  • orientation: Orientação do dispositivo (portrait ou landscape).
  • resolution: Resolução da tela.

3. Exemplo Prático de Responsividade

Redimensione a janela do navegador para ver a caixa abaixo mudar de cor e tamanho, demonstrando o uso de min-width e max-width.