Media Query Generator

A CSS media query is a rule that applies a block of styles only when certain conditions about the user's device or browser environment are true. Introduced in CSS2 and greatly expanded in CSS3, media queries are the cornerstone of responsive web design. They let you write a single stylesheet that gracefully adapts to phones, tablets, laptops, desktops, print previews, dark-mode preferences, and much more.

The basic anatomy of a media query is:

@media <media-type> and (<media-feature>: <value>) {
  /* CSS rules */
}

The media type describes the broad category of output device. The four standard types are all (matches every device), screen (colour or monochrome screens), print (paged media and print-preview mode), and speech (screen readers). The optional media feature narrows the match further — width, height, orientation, resolution, colour capability, and user preferences like reduced motion or preferred colour scheme.

Media queries are evaluated live in the browser. When the viewport is resized, the browser re-evaluates each query and applies or removes the matching rule sets instantly. This live re-evaluation is what makes fluid, breakpoint-based layouts possible without any JavaScript. Understanding how to construct precise, well-targeted media queries is one of the most valuable skills in modern front-end development.

The media query generator on this page builds queries using the following construction logic:

1. Start with the media type keyword: @media screen, @media print, etc.
2. Append a and (feature: value) clause for most features.
3. For orientation, the value is a keyword (portrait or landscape) rather than a number.
4. For color, no value is appended — the bare feature name acts as a boolean test.
5. Close the rule set with curly braces containing a placeholder comment.

The generator supports five CSS length units — px, em, rem, vw, and vh — so you can write both absolute and relative breakpoints. Relative units like em are popular because they respect the user's browser font-size setting, making breakpoints more accessible.

Choosing the right media type and media feature combination is essential for correct targeting. Here is a reference of what the generator supports:

The generator also covers the most useful media features:

While CSS media queries can target any pixel value, the industry has converged on a handful of standard breakpoints that align with common device categories. The quick-breakpoint buttons on this media query generator reflect the most widely used reference points:

Popular CSS frameworks each define their own breakpoint system. Tailwind CSS uses sm (640 px), md (768 px), lg (1024 px), xl (1280 px), and 2xl (1536 px). Bootstrap 5 uses xs (< 576 px), sm (>= 576 px), md (>= 768 px), lg (>= 992 px), xl (>= 1200 px), and xxl (>= 1400 px). Understanding both sets of breakpoints allows you to write media queries that integrate seamlessly with whichever utility or component framework your project uses.

A mobile-first approach is broadly recommended: write your base styles for the smallest screen, then use min-width queries to progressively enhance the layout for larger viewports. This strategy tends to produce leaner CSS because mobile styles serve as the default rather than being overridden later.

Beyond viewport dimensions, modern CSS media queries give you access to the user's system-level preferences. These queries are particularly important for accessibility and user experience. The prefers-color-scheme feature detects whether the operating system is set to dark or light mode, enabling your site to switch colour palettes automatically without requiring a manual toggle.

The prefers-reduced-motion feature reports whether the user has requested that the system reduce non-essential animation. Applying this query responsibly — disabling or slowing auto-playing carousels, parallax effects, and transitions — is a meaningful accessibility improvement for users with vestibular disorders or motion sensitivity.

Other available preference queries include prefers-contrast (high or low contrast modes), forced-colors (Windows High Contrast mode), and prefers-reduced-data (for users on metered connections). Building these queries into your stylesheet shows respect for the user's explicit system choices and is increasingly expected as part of inclusive design practice.

The common queries panel in this generator includes one-click copies for dark mode, light mode, reduced motion, and print — the four preference queries most commonly needed in production projects. Each query is provided as a ready-to-paste code block so you can drop it directly into your stylesheet and add your overrides inside.

Responsive design is not limited to screen sizes. Print media queries let you tailor a page for physical output — hiding navigation bars, expanding collapsed content, converting colour backgrounds to white, and ensuring that all URLs are printed as visible text next to their anchor elements. A well-crafted print stylesheet significantly improves the experience of users who print articles, invoices, and reports from your site.

The standard pattern is to write all print rules inside @media print { }. Common rules include display: none for headers, footers, and sidebars; page-break-inside: avoid for tables and figures; and color: black; background: white to conserve ink. Print media queries are easy to overlook but are quick to add and are genuinely appreciated by users who regularly print web content.

Speech media queries target text-to-speech readers. While few properties are speech-specific — the speak property was removed from the CSS spec — using semantic HTML in combination with @media speech can still help control how content is announced. Most accessibility work for screen readers is better handled through ARIA attributes and semantic markup, but knowing the query exists is useful when you need fine-grained control in edge cases.