CSS Media Queries for Common Screen Sizes

There are no mandatory CSS media-query breakpoints for common screen sizes. Start with a layout that works in a narrow viewport, then add a breakpoint when the content needs a different arrangement. CSS width queries measure the browser viewport in CSS pixels, not the physical dimensions of a device screen.

That means a breakpoint list is a starting convention, not a universal device checklist. Flexible grids and sizing rules may handle the layout without any media query at all.

1. What a CSS media query measures

A media query conditionally applies styles according to the viewport or other environment features. For continuous media, a width query measures the viewport, including a rendered scrollbar when present. A CSS pixel is a logical unit, not a physical screen pixel. See the MDN media queries guide and the W3C Media Queries specification.

Width does not reliably identify a phone, tablet, or desktop. Window size, zoom, display scaling, browser chrome, and user choices all affect the available viewport. Write the condition around the space your content needs.

2. Choose breakpoints from the content

1. Build the narrow layout first, with readable text and controls that fit.
2. Resize the viewport gradually. Look for the point where lines become too long, columns become cramped, navigation collides, or a layout change would help.
3. Add a breakpoint near that point and make the smallest useful change.
4. Check both sides of the threshold and a range of widths between your test sizes.

Prefer relative units such as rem when they make the threshold track text sizing. Use min-width to layer on wider layouts as the viewport grows. Some responsive layouts need no breakpoint: flexible grids, relative sizing, and min(), max(), or clamp() can adapt continuously. MDN notes that media queries can help with responsive web design but are not required (MDN: Responsive design).

3. Runnable example: one column to two

Save this as index.html and open it in a browser. The cards stay in one column until the content has room for two. The 80rem threshold is only an example; change it after checking when your own content needs the second column.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive card layout</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 0; font: 1rem/1.5 system-ui, sans-serif; }
    main { width: min(100% - 2rem, 72rem); margin-inline: auto; padding-block: 2rem; }
    .cards { display: grid; grid-template-columns: 1fr; gap: 1rem; }
    article { padding: 1.25rem; border: 1px solid #bbb; border-radius: .5rem; }
    @media (width >= 80rem) {
      .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
  </style>
</head>
<body>
  <main>
    <h1>Responsive cards</h1>
    <div class="cards">
      <article><h2>First card</h2><p>Content that can wrap on narrow screens.</p></article>
      <article><h2>Second card</h2><p>Another card in the same flexible grid.</p></article>
    </div>
  </main>
</body>
</html>

The viewport meta tag tells mobile browsers to use the device-width layout viewport. Without it, a mobile browser may lay the page out at a wider virtual width and scale it down, making responsive width queries appear not to work as expected.

4. Common breakpoint conventions

Framework presets can help a team use consistent thresholds, but values belong to a framework version. For example, Bootstrap 4.0 documented a default below 576px, then minimum-width thresholds at 576px, 768px, 992px, and 1200px for its small, medium, large, and extra-large tiers. These are Bootstrap 4.0 conventions, not universal screen sizes or a recommendation to target particular devices. See Bootstrap 4.0 layout documentation.

Approach	Use it when	Tradeoff
Content-driven custom threshold	The layout has a specific point where it needs to change	Requires checking the design at intermediate widths
Framework preset	The project uses that framework and version, and shared conventions help	Presets do not guarantee your content fits at every threshold
No breakpoint	Flexible sizing and wrapping already produce a readable layout	Some structural changes may still need a query

5. Useful media features beyond width

Use environment and preference queries when they affect the experience. Do not infer these preferences from viewport width.

Feature	Example	Typical use
Height	@media (height < 40rem)	Adjust a short viewport where vertical space is constrained
Orientation	@media (orientation: landscape)	Adapt a composition to viewport orientation
Aspect ratio	@media (aspect-ratio > 3/2)	Respond to unusually wide or tall viewports
Hover and pointer	@media (hover: hover) and (pointer: fine)	Offer hover affordances only when the primary input supports them
Color scheme	@media (prefers-color-scheme: dark)	Respect the user’s light or dark preference
Reduced motion	@media (prefers-reduced-motion: reduce)	Reduce nonessential animation when requested
Resolution	@media (min-resolution: 2dppx)	Adjust resolution-dependent assets or effects

Media Queries Level 4 range syntax, such as (width >= 80rem), is concise. The traditional (min-width: 80rem) form is also widely used. Choose syntax supported by your project’s target browsers. Consult MDN’s @media reference for feature syntax and compatibility details.

6. Test responsive behavior

1. Use browser developer tools to resize the viewport continuously around every breakpoint.
2. Check a narrow width, the breakpoint itself, a width just above it, and a wide layout.
3. Test zoom and larger text where practical, and check for horizontal overflow, clipped controls, and awkward wrapping.
4. Check dark mode and reduced motion if the page styles those preferences.
5. Test real devices when touch behavior, browser chrome, or device-specific rendering matters.

For repeatable screenshots across viewport sizes, ScreenshotNeo is a website screenshot API and MCP server. Its viewport presets and custom viewport support can help capture the same page at selected widths; consult the ScreenshotNeo documentation for request options.

7. Troubleshooting

Symptom	Likely cause	Fix
Mobile layout never appears	The viewport meta tag is missing, or the query targets a width different from the actual layout viewport	Add <meta name="viewport" content="width=device-width, initial-scale=1"> and inspect the viewport width in developer tools.
Styles change at an unexpected width	The query measures CSS viewport pixels, not the device’s physical panel width; zoom and rendered scrollbars can also affect available space	Inspect the live viewport and adjust the threshold based on the layout’s behavior.
Columns overflow despite a matching query	Grid or flex children may have an intrinsic minimum size, or fixed widths may exceed the container	Use flexible tracks such as minmax(0, 1fr), allow wrapping, and remove unnecessary fixed widths.
Rules seem to do nothing	Invalid syntax, a later rule overriding the declaration, or an unsupported feature in the target browser	Check the browser console and computed styles; compare with a traditional min-width query if needed.
Layout breaks between preset widths	The design was checked only at framework thresholds or device presets	Resize continuously and place a content-driven breakpoint where the layout first stops working well.

8. Performance, reliability, and cost

Media queries are a normal part of CSS; the important practical issue is keeping layouts understandable and checking them across widths. Avoid accumulating overlapping overrides that are hard to reason about. A small number of intentional breakpoints is often easier to maintain, but the right number depends on the content.

For screenshot-based review, use consistent URLs and viewport settings so captures are comparable. ScreenshotNeo offers caching with a chosen TTL, async jobs with signed webhooks, and bulk capture for up to 100 URLs per call. Its billing rules state that only clean shots are billed; bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, with verdict and billing information in response headers. These are service facts, not a substitute for checking the current documentation and plan details.

9. Or skip the browser setup

Make a single GET request to capture a page. This cURL example saves a WebP screenshot:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Python:

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

Node.js:

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', new Uint8Array(await res.arrayBuffer()));

Replace the example URL with the page you want to capture. The API supports PNG, JPEG, WebP, and PDF output, among its capture options. Cookie banners, popups, and chat widgets are removed before the shot; each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are never billed. An MCP server lets AI agents use screenshot tools. The free plan includes 1,000 shots a month with no card; paid plans start at $5 for 3,000. See the API documentation for authentication and options, then sign up for 1,000 free screenshots a month, no card required.

10. FAQ

Should I use pixels or rems for breakpoints?

Both are valid CSS units. Relative units such as rem can make a threshold respond to text sizing; choose the unit that makes sense for the design and test the result.

Do I need separate mobile, tablet, and desktop queries?

No. Add only the layout changes your content needs. A design can have several breakpoints or none.

Does a width breakpoint detect a phone?

No. It tests the viewport width in CSS pixels. It does not identify a particular device category.