Resumo CSS – Media Queries

1. O que são Media Queries?

Media queries são regras do CSS que permitem aplicar estilos diferentes com base em características do dispositivo, como:

• Largura da tela
• Altura da tela
• Orientação (paisagem ou retrato)
• Resolução, entre outros

2. Sintaxe básica

@media (condição) {
  /* estilos aplicados se a condição for verdadeira */
}

Exemplo:

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

3. Exemplo prático com uma div

Essa caixa muda de cor e tamanho do texto com base na largura da tela:

• > 768px: azul
• <= 768px: vermelho
• <= 480px: verde

4. Tipos mais usados de media query

• max-width – aplica estilo até certo tamanho
• min-width – aplica estilo a partir de certo tamanho
• orientation – paisagem ou retrato
• screen – tipo de mídia (tela, impressão, etc.)

@media screen and (orientation: portrait) {
  /* Aplica estilos em modo retrato */
}

5. Boas práticas

• Use min-width para design "mobile-first"
• Organize suas media queries no final do CSS ou por componente
• Evite usar valores fixos em pixels; prefira %, vw/vh ou rem

6. Breakpoints comuns

/* Telas pequenas (celular) */
@media (max-width: 480px) { ... }

/* Telas médias (tablet) */
@media (max-width: 768px) { ... }

/* Telas grandes (desktop) */
@media (max-width: 1024px) { ... }