DisplayPixels

How to Use This @media Helper

The code block above generates a CSS @media rule pre-filled with this device's viewport width, orientation, and DPI. Click Copy to clipboard, paste the block into your stylesheet, and add your styles inside the braces.

Change min-width to max-width if you are using a desktop-first approach. Adjust the pixel value to match your design breakpoints. Remove the resolution part if you want the rule to apply regardless of pixel density.

Resize your browser window and the code updates in real-time — handy for finding the exact width at which a layout breaks.

CSS Media Queries Explained

A media query is a CSS feature that applies styles only when specific conditions are met — screen width, orientation, pixel density, or even user preferences like dark mode. They are the foundation of responsive web design, allowing a single stylesheet to adapt to phones, tablets, and desktops.

The basic syntax looks like this:

/* Mobile-first: styles below apply at 768px and wider */
@media (min-width: 768px) {
  .sidebar { display: block; }
}

/* Desktop-first: styles below apply at 767px and narrower */
@media (max-width: 767px) {
  .sidebar { display: none; }
}

Mobile-first (using min-width) is the modern standard. You write base styles for small screens, then add complexity as the viewport grows. Desktop-first (using max-width) starts with the full layout and strips it down for smaller screens. Most frameworks in 2026, including Tailwind CSS and Bootstrap 5, default to mobile-first.

Common Breakpoints in 2026

There is no universal set of breakpoints — the best breakpoints are where your design breaks. That said, these are the most widely used defaults in popular CSS frameworks:

Use our screen resolution checker to see your actual viewport width, then match it against these breakpoints to understand which rule applies on your device.

Targeting High-DPI (Retina) Screens

To serve higher-resolution images or adjust styles for high-DPI screens, use the resolution media feature:

/* Retina / high-DPI screens (DPR >= 2) */
@media (min-resolution: 192dpi),
       (min-resolution: 2dppx) {
  .logo { background-image: url('logo@2x.png'); }
}

/* Prefer the modern unit 'dppx' (dots per pixel) */
/* 1dppx = 96dpi, 2dppx = 192dpi */

Check your device's DPR on the main page or use your calibrated PPI value to decide whether a 2x or 3x asset is appropriate.

Media Query Best Practices

• Don't target specific devices. Devices change every year. Use content-based breakpoints — resize your browser until the layout looks wrong, and add a breakpoint there.
• Start mobile-first. Write styles for the smallest viewport, then layer on complexity with min-width queries. This keeps your CSS simpler and faster to load on phones.
• Use relative units. Combine em-based media queries with fluid typography (clamp()) for layouts that scale smoothly between breakpoints.
• Consider container queries. CSS Container Queries (supported in all major browsers since 2023) let components respond to their parent's width rather than the viewport. This makes reusable components more flexible.
• Test on real devices. Emulators are helpful but not perfect. Share this page with a friend's phone or tablet to see the actual viewport and DPI.

Frequently Asked Questions

What breakpoints should I use?

Use breakpoints where your design actually breaks, not at arbitrary device widths. If your layout is fine until 820px and then wraps awkwardly, put a breakpoint at 820px. The framework defaults (640, 768, 1024, 1280) are a reasonable starting point.

Should I use min-width or max-width?

Use min-width for mobile-first development (recommended). Use max-width for desktop-first. Never mix both in the same project unless you have a clear reason — it leads to conflicting rules and debugging headaches.

What are container queries?

Container queries (@container) are a CSS feature that lets a component respond to its parent's width instead of the viewport's width. This makes components truly reusable — a card component can adapt whether it is in a narrow sidebar or a full-width grid, without changing any CSS.

How do I target Retina displays in CSS?

Use @media (min-resolution: 2dppx) or the older (-webkit-min-device-pixel-ratio: 2) prefix. The dppx unit stands for "dots per pixel" — 2dppx matches any screen with a DPR of 2 or higher (Retina, most modern phones).

Does the generated code include print styles?

No — the helper generates screen-only breakpoints. For print styles, use @media print { } separately. Print stylesheets typically hide navigation, set body text to black on white, and remove background colours.