CSS @media Queries Cheat Sheet

Breakpoint comum para tablets (Design Mobile-first).

@media (min-width: 768px) { ... }

Aplica estilos apenas para telas menores que 1024px.

@media (max-width: 1024px) { ... }

Aplica estilos baseados na orientação da tela.

@media (orientation: landscape) { ... }

Aplica estilos específicos para a impressão da página.

@media print { ... }

Aplica estilos para telas de alta densidade (Retina).

@media (min-resolution: 192dpi) { ... }

Detecta se o usuário prefere o modo escuro no sistema.

@media (prefers-color-scheme: dark) { ... }