Media Query Snippets

Mobile first — sm and up (640px+)

@media (min-width: 640px) { }

md and up (768px+)

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

lg and up (1024px+)

@media (min-width: 1024px) { }

xl and up (1280px+)

@media (min-width: 1280px) { }

2xl and up (1536px+)

@media (min-width: 1536px) { }

Mobile only (max 767px)

@media (max-width: 767px) { }

Retina / HiDPI display

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { }

Prefers dark mode

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

Current viewport (live)

@media (max-width: —px) { }

Common Device Screen Sizes

Prefix	Min Width	CSS Rule	Typical Use
xs (none)	0px	default styles	All screens / mobile first
sm	640px		Large phones, landscape
md	768px		Tablets, iPad portrait
lg	1024px		Laptops, iPad landscape
xl	1280px		Desktops, wide monitors
2xl	1536px		Large desktops, 4K

ZapScreenSize