Free tools Windows power users keep installed
One-click scans. No signup required.
There are no mandatory CSS media-query breakpoints for common screen sizes. A media query checks the browser’s viewport or another environment feature; choose a width threshold where your layout needs to change, not because a device is labeled “phone,” “tablet,” or “desktop.”
What a CSS width media query measures
A width media query for continuous media measures the browser viewport in CSS pixels, not the physical width of the device’s panel. The rendered scrollbar is included when present. A CSS pixel is a layout unit; it is not necessarily one physical screen pixel. See the MDN guide to media queries and the W3C Media Queries specification.
As an Amazon Associate I earn from qualifying purchases.
That distinction is why a list of device widths cannot serve as a complete breakpoint plan. Viewports vary, browser windows can be resized, and a layout may need adjustment at a width that does not correspond to a particular device category.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →How to choose breakpoints
- Start with the narrow layout. Build a layout that works at a constrained width, using flexible sizing where possible.
- Check the content as the viewport grows. Look for a concrete failure: cramped navigation, unreadable line lengths, overlapping elements, or columns that no longer fit.
- Add a breakpoint only where a change helps. Choose a threshold just where the layout begins to work poorly, then verify the layout on both sides of it.
- Test more than preset device widths. Check intermediate widths and resize the viewport to catch awkward gaps between your chosen breakpoints.
MDN recommends flexible layouts that account for both common and unknown sizes. Relative units can make thresholds adapt more usefully than a fixed device-width list. Media queries may not be needed if flexible grids and sizing constraints already produce the desired result. See MDN’s responsive design guide.
#1 Best Overall
A simple mobile-first pattern
Keep the narrow layout as the baseline, then add a wider arrangement at a content-driven minimum width:
.cards {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (width >= 48rem) {
.cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (width >= 72rem) {
.cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}The values above are illustrative, not universal recommendations. Adjust them to the point at which the cards and their content fit comfortably. The minmax(0, 1fr) columns help prevent long content from forcing a grid track wider than the available space.
For a layout change that applies only at a wide viewport, MDN illustrates this form:
@media screen and (width >= 80rem) {
.container {
margin: 1em 2em;
}
}Media queries can help with responsive design, but they are not a requirement: flexible grids, relative units, and minimum or maximum sizing can handle some responsive behavior without a query.
Framework breakpoints are conventions, not standards
Framework values can be useful when a project already uses that framework, but they are version-specific presets—not universal device boundaries or required CSS targets. For example, Bootstrap 4.0 documents these minimum-width breakpoints:
| Bootstrap 4.0 label | Minimum viewport width |
|---|---|
| Small | 576px |
| Medium | 768px |
| Large | 992px |
| Extra large | 1200px |
These values come from Bootstrap 4.0’s layout documentation. Use them when consistency with that documented version matters; do not assume they describe current device sizes or apply to every project. When choosing between a custom threshold and a framework preset, consider where your content stops fitting cleanly and which framework version the project actually uses.
Media queries can test more than width
Width is only one input. Depending on the design, CSS media queries can test height, orientation, aspect ratio, resolution, hover and pointer capability, color scheme, and reduced-motion preference. Use these features when the environment or user preference is relevant; do not use width as a proxy for a specific device. MDN documents these media features.
- Use orientation or aspect ratio when the composition genuinely depends on the viewport’s shape.
- Use hover or pointer features to adapt interactions to available input capabilities, not to assign a device identity.
- Respect preferences such as reduced motion and color scheme when those behaviors are part of the experience.
Common breakpoint mistakes and fixes
- Copying a device list as if it were mandatory: there is no universal mobile/tablet/desktop breakpoint checklist. Start from the content and test varied widths.
- Using physical screen dimensions: media-query lengths use CSS pixels. Test the viewport the browser presents to the layout instead.
- Adding a query for every device category: extra thresholds add complexity. Keep one only when it produces a needed layout change.
- Relying on a framework preset without checking its version: framework values are tied to documented versions. Confirm the project’s version, then decide whether its convention suits the content.
- Assuming width captures interaction or accessibility needs: use the relevant media feature for a preference or input capability where appropriate.
Or skip the browser setup
If you need screenshots to inspect how a page renders at different widths, ScreenshotNeo can capture a URL through one API request. For a viewport check, for example, supply the viewport parameter supported by your capture setup and compare the resulting images; a screenshot is a visual aid, not a substitute for testing actual responsive behavior in a browser.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. Cookie banners, popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents take screenshots. The Free plan includes 1,000 screenshots per month with no card, and paid plans start at $5 for 3,000. Sign up for free.
Further learning
MDN lists Scrimba’s interactive introduction and challenge as a way to practice media queries.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problems
