CSS Media Query Breakpoints

Reference common responsive widths, test your current viewport, and copy mobile-first media queries for real layout debugging.

Viewport width CSS pixels Mobile-first queries

Live media query breakpoint

…pxviewport width

Selected system

Tailwind CSS

Base range

Next breakpoint

sm in 640px

40rem min-width (640px equivalent)

Copy-ready output

base styles (no min-width query)

base

2xl

Critical widths to test

Exact widths around the selected Tailwind threshold.

Width	Use case	Mobile-first query
360px	Narrow Android minimum mobile layout	@media (min-width: 360px)
393px	Modern iPhone iPhone portrait baseline	@media (min-width: 393px)
430px	Large phone Plus / Pro Max portrait	@media (min-width: 430px)
768px	Tablet portrait iPad and Bootstrap md	@media (min-width: 768px)
1024px	Tablet landscape Tailwind lg and laptop edge	@media (min-width: 1024px)
1366px	Small laptop common desktop QA width	@media (min-width: 1366px)
1536px	Large laptop Tailwind 2xl threshold	@media (min-width: 1536px)
1920px	Desktop wide monitor baseline	@media (min-width: 1920px)

Mobile-first

.layout {
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

Range query

@media (768px <= width < 1024px) {
  .layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

› Do CSS media queries use screen width or viewport width?

Width media queries use viewport width in CSS pixels. The physical screen resolution is not what triggers a breakpoint.

› Should I write mobile-first or desktop-first queries?

Mobile-first min-width queries are easier to layer for most layouts. Use max-width only when you need a rule specifically below a threshold.

› What widths should I test?

Test common phone widths around 360-430px, tablet widths around 768-1024px, and desktop widths around 1366px and above.