$cat~/glossario/media-query.md

Media Query

CSS

Condição @media para estilos responsivos por viewport ou recurso.

media-query.mdmarkdown
01

seção

Explicação

Media Query — Condição @media para estilos responsivos por viewport ou recurso.

@media condition apply styles — width, prefers-color-scheme, prefers-reduced-motion.

Mobile-first min-width breakpoints.

02

seção

Exemplo

snippetcss
@media (min-width: 768px) {  .sidebar { display: block; }}
03

seção

Modo de uso

  • Responsive layout

  • Dark mode media

  • Print stylesheet

04

seção

Armadilhas comuns

  • Too many breakpoints arbitrary

  • px vs rem consistency

05

seção

Termos relacionados