CSS Media Query Viewport Ranges and Device Targeting

Media Query Ranges Mapped to Real Devices

Understanding which real devices fall into each media query range helps you write more intentional CSS. Instead of guessing which breakpoint to use, you can map ranges to actual device viewports.

Device-to-Range Mapping

0-479px     │ Small phones (iPhone SE, Galaxy S portrait)
480-767px   │ Large phones, small tablets (Pixel, iPhone Pro Max landscape)
768-1023px  │ Tablets portrait (iPad, Galaxy Tab)
1024-1279px │ Tablets landscape, small laptops (iPad Pro, Chromebook)
1280-1535px │ Standard laptops (MacBook Air, Surface Laptop)
1536px+     │ Large laptops, desktops (MacBook Pro 16", external monitors)

Modern Range Syntax

CSS now supports range syntax for media queries, which is more readable:

/* Old syntax */
@media (min-width: 768px) and (max-width: 1023px) { ... }

/* New range syntax */
@media (768px <= width < 1024px) { ... }

Container Queries

CSS Container Queries (@container) are a modern alternative to viewport-based media queries. They respond to the size of a parent container rather than the viewport, making components truly responsive regardless of where they are placed in the layout.

.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card { display: grid; grid-template-columns: 1fr 2fr; }
}

Common Pitfalls

• Overlapping ranges: Ensure max-width and min-width do not create gaps or overlaps. Use min-width exclusively (mobile-first) for cleaner code.
• Assuming portrait: A phone at 412px wide in landscape becomes 915px wide, landing in your tablet range. Test both orientations.
• Ignoring DPR: Media queries match CSS pixels, not physical pixels. A min-width: 1024px query triggers at 1024 CSS pixels regardless of DPR.