CSS Media Query Generator

em-based breakpoints respect the user’s browser zoom and default font size. If a user has set their browser to use 20px as the base font (a large-text accessibility setting), a 48em breakpoint equals 960px instead of 768px, so the layout adapts to their font scale, not yours. With px breakpoints the layout snaps at the same screen width regardless of user font settings, which can produce broken layouts for low-vision users.

@media (prefers-color-scheme: dark). The browser reports the user’s OS theme preference. To handle both, write your default styles in light, then override inside a dark-mode media query. There is also (prefers-color-scheme: light) for users who explicitly opted to light when their OS defaults to dark.

A user setting on macOS, iOS, Windows, and Android that asks for reduced animation. @media (prefers-reduced-motion: reduce) matches when set. Inside, kill or simplify animations, for example * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }. It supports WCAG 2.1 compliance and is increasingly enforced legally.

hover reports whether the input device can hover (mouse yes, finger no). pointer reports its precision (mouse fine, finger coarse, eye-tracking none). They overlap a lot but not perfectly: a 2-in-1 laptop with a touchscreen reports both across input modes, and most browsers report the PRIMARY input device.

@media (min-resolution: 2dppx) matches devices with at least 2 device pixels per CSS pixel (Retina, 4K phones, and so on). For 3x devices use (min-resolution: 3dppx). Use it to serve 2x or 3x images via background-image swaps. The older -webkit-min-device-pixel-ratio syntax is no longer needed in 2026.

Yes, since the Media Queries Level 4 spec. Instead of @media (min-width: 768px) and (max-width: 1024px), you can now write @media (768px <= width <= 1024px). Browser support reaches all majors as of mid-2026. This tool emits the classic syntax because some build tools still mangle the range form.

When a user installs your web app to their home screen, the browser sets a display mode. @media (display-mode: standalone) matches when running as an installed PWA, which is useful for hiding install banners or showing app-specific UI like a back button. Other values include fullscreen, minimal-ui, and the default browser.

Comma in @media means OR: @media (max-width: 600px), (min-width: 1200px) means small OR large. This tool combines with AND because OR queries with mixed-direction widths often turn into bugs in production. If you need OR, write two separate @media blocks for the same effect with clearer intent.

Yes. Conditions, breakpoint values, and CSS body stay in your browser. Nothing is uploaded.