Breakpoint Reference

Name ▲▼	Min Width ▲▼	Query
xs - Portrait phones	320px	@media (min-width: 320px)
sm - Landscape phones	576px	@media (min-width: 576px)
md - Tablets	768px	@media (min-width: 768px)
lg - Desktops	992px	@media (min-width: 992px)
xl - Large desktops	1200px	@media (min-width: 1200px)
2xl - Larger desktops	1400px	@media (min-width: 1400px)

CSS media query syntax

@media [media-type] and ([media-feature]) {
  /* styles applied when condition is true */
}

Common breakpoints

Breakpoint	Width	Typical target
Mobile (portrait)	< 640px	Phones in portrait
Mobile (landscape)	640px – 767px	Phones in landscape
Tablet	768px – 1023px	iPads, small tablets
Desktop	1024px – 1279px	Laptops
Wide desktop	1280px+	Large monitors

Mobile-first vs desktop-first

Mobile-first uses min-width breakpoints: start with base styles for small screens, then override for larger screens. This is the recommended approach as it tends to produce leaner, more performant CSS.

Desktop-first uses max-width breakpoints: start with desktop styles and override downward. Easier to convert existing desktop sites but often produces more complex CSS.

Other useful media features

prefers-color-scheme: dark - detect dark mode
prefers-reduced-motion: reduce - respect motion accessibility preferences
print - print-specific styles
hover: none - touch-only devices

Logical operators

and: both conditions must be true. @media screen and (min-width: 768px)
not: negates the entire query. @media not print
only: hides the query from legacy browsers that don't support media features (rarely needed today).
Comma (,): acts as OR. @media (max-width: 600px), print applies if either condition is true.

Accessibility media features

Feature	Values	Use case
`prefers-reduced-motion`	`no-preference` \| `reduce`	Disable animations for vestibular disorder users
`prefers-color-scheme`	`light` \| `dark`	Auto dark mode
`prefers-contrast`	`no-preference` \| `more` \| `less`	High-contrast mode
`forced-colors`	`none` \| `active`	Windows High Contrast / forced color palettes
`inverted-colors`	`none` \| `inverted`	iOS smart invert, accessibility display settings

Container queries (CSS Level 5)

Traditional media queries respond to the viewport size. Container queries respond to the size of a specific parent element, making components truly portable. Browser support landed in all major browsers in 2023:

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

@container sidebar (min-width: 300px) {
  .card {
    flex-direction: row;
  }
}

This tool generates standard media queries. For container query syntax, refer to the MDN Container Queries guide.

CSS @media Query Builder - Viewport & Breakpoint Tester

Media Type

Dimensions

Media Features

Common Breakpoints