Aula 18 — Media Queries: adaptando o CSS ao tamanho da tela

Media queries permitem aplicar estilos diferentes dependendo das características do dispositivo, como largura da tela, orientação e resolução.

É com elas que o design responsivo realmente acontece.

O que são media queries?

Uma media query é uma condição. Se a condição for verdadeira, o CSS dentro dela é aplicado.

 @media (max-width: 768px) { body { background-color: #f5f5f5; } } 

Anatomia da Media Query

@media (max-width: 768px) { ... }
@media: Inicia a regra de consulta de mídia.
(max-width: 768px): Esta é a condição. Ela diz: "Aplique os estilos abaixo se a largura da janela do navegador for de no máximo 768 pixels".

Em termos práticos: serve para tablets em modo retrato e celulares.

Se a tela tiver 769px, esta regra é ignorada.

body { background-color: #f5f5f5; }: É o estilo que será ativado. Neste caso, muda a cor de fundo da página para um cinza muito claro.

O que acontece na prática?

No Desktop (telas grandes): O fundo permanece com a cor padrão (geralmente branco).
No Tablet/Mobile (telas menores): Assim que o usuário redimensiona a janela para menos de 768px, o fundo "muda de cor" instantaneamente.
Isso é comumente usado para esconder menus, aumentar o tamanho de botões para facilitar o toque ou mudar o layout de colunas para linhas.

Por que usar media queries?

• Ajustar layout para celular, tablet e desktop
• Melhorar legibilidade
• Evitar rolagem horizontal
• Adaptar navegação e espaçamentos

Largura da tela: min-width e max-width

As condições mais usadas em media queries são:

• max-width — até um tamanho
• min-width — a partir de um tamanho

 /* Mobile */ @media (max-width: 600px) { .menu { flex-direction: column; } }

/* Desktop */
@media (min-width: 1024px) {
.menu {
flex-direction: row;
}
}

Abordagem mobile first

Na abordagem mobile first, escrevemos primeiro o CSS para telas pequenas.

Depois, usamos min-width para telas maiores.

 /* Estilo base (mobile) */ .cards { display: block; }

/* Tablet e desktop */
@media (min-width: 768px) {
.cards {
display: flex;
gap: 16px;
}
}

Breakpoints comuns

Não existem valores obrigatórios, mas alguns tamanhos são bastante usados:

• Até 600px — celulares
• 768px — tablets
• 1024px — notebooks
• 1200px+ — telas grandes

Media queries além da largura

Também é possível usar media queries para:

• Orientação da tela
• Modo escuro
• Resolução

 @media (orientation: landscape) { body { font-size: 18px; } } 

Sobre a Media Query acima:

orientation: landscape: Esta condição é verdadeira sempre que a largura da janela for maior que a altura.

Comum em: Desktops, laptops e dispositivos móveis segurados horizontalmente.

font-size: 18px: O estilo aplicado aumenta o tamanho da fonte. A lógica aqui é que, em modo paisagem, geralmente há mais espaço horizontal para o texto fluir, permitindo uma leitura mais confortável com fontes maiores.

Quando ela é ativada?

Ativa: Quando você vira seu smartphone de lado para assistir a um vídeo, por exemplo.
Inativa: Quando você segura o celular em pé (portrait), onde a altura é maior que a largura.
Desktop: Por padrão, quase todos os monitores de computador operam em modo landscape, então essa regra estaria constantemente ativa neles.

Boas práticas com media queries

• Use mobile first sempre que possível
• Organize media queries por componente
• Evite repetir código
• Teste em diferentes tamanhos

Na próxima aula, vamos falar sobre transições e animações — como dar vida à interface sem exageros ✨🎞️